DEV Community: Karter L.

DEV Community: Karter L. The latest articles on DEV Community by Karter L. (@kdliving14). https://dev.to/kdliving14 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F883705%2F7b402d43-6b79-48f9-9bfe-89635b9510a4.jpg DEV Community: Karter L. https://dev.to/kdliving14 en Databases & I: an Adventure Karter L. Wed, 05 Oct 2022 14:37:00 +0000 https://dev.to/kdliving14/databases-i-an-adventure-33l3 https://dev.to/kdliving14/databases-i-an-adventure-33l3 <p>Drawing up database connections aren’t as difficult as you might think. Say for example, you are creating a choose your own adventure web application, where the user would be able to see their choices and be able to reset their progress if they hit a bad end.</p> <p>What would you need in your database? You know for sure that you will need a User table and a Story table, but what else?</p> <p>That all depends on what you want to present to the user.</p> <h2> User Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>Username</li> <li>Password</li> </ol> <p>Absolutely needed to keep track of input per user, aka where the user left off in the story and the choices they've made in the story.</p> <h2> Story Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>Title</li> <li>Description</li> </ol> <p>Think of this like the front and back cover of a book where it says the title and the brief blurb about the story. If we wanted this to be a regular story without the choose your own adventure aspect, we could put all of the story in here but...</p> <h2> Events Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>Story_id (which story does the event belong to?)</li> <li>Event description (what you are displaying to the user)</li> </ol> <p>The story table could hold all of the events but if you ever want to expand to more stories, you would end up getting all of the events mixed up between stories. </p> <p>Not to mention that in order to be able to have the user pick what they want to happen, you need to have events (chapters) separated so that when they choose an option it can change the story trajectory.</p> <h2> Choices Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>Choice description (what you are displaying to the user)</li> <li>Event_id (what event it belongs to)</li> <li>Next Event Id (what event goes next if selected)</li> </ol> <p>If we had the choices in the events table it would be extremely difficult to map out which choice leads to what event. Separating them out makes it easier to navigate plus then you can get a little creative on what you want each choice to include: a little picture to symbolize the choice, a sound effect to be played when it's selected?</p> <p>Ok so those are pretty basic, but how are we going to be able to track the user choices? Making the User have an array data point is not the easiest thing to do but what is the alternative? <em>More tables!</em></p> <h2> User Stories Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>User_id</li> <li>Story_id </li> </ol> <p>This table will be our connection (join table) between the User and the Stories. Having this table will make it so that if we ever add more stories, our database will be easily expandable and the user can do more than one story at a time.</p> <h2> User Choices Table </h2> <p><strong>Minimum datapoints needed:</strong></p> <ol> <li>Id (auto generated)</li> <li>Userstory_id</li> <li>Event_id </li> <li>Choice_id</li> </ol> <p>Finally down to the meat and potatoes of what we actually wanted in the first place. This table will be our connection between Users and their choices. </p> <p>However, we don't want to just have a User data point and a Choice data point. </p> <p>For one thing, the choice belongs to an Event. Without that context, it could get confusing for the user to determine what they did in the story at whatever time. So we definitely need to add an Event connection.</p> <p>Secondly, if we just link the user choice directly to the user, it becomes incredibly difficult to not only delete the user choices when it comes time to reset the story but it also makes it difficult for the User to determine what Story the choices are from as you would have to go several layers deep to get that connection back (Choice > Event > Story).</p> <p>Connecting it to the User Stories table instead of the User table will allow us to not only easily reset the User's progress (using dependent destroy on the User Stories table) but it will also allow us to easily separate out the choices per Story on the front end.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Yp52hI8v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzhqsf683xnjebq8osur.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Yp52hI8v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzhqsf683xnjebq8osur.png" alt="Database Diagram" width="880" height="697"></a></p> <p>All of these tables allow the project to expand with time; whether that be with more users, stories, or even expanded mechanics (inventory system maybe?). I'm definitely excited to see where this could go. The diagram above shows a little more than what I previously described, but that's the beauty of this project, there is so many ways to expand!</p> <p>If you found this interesting, checkout the project on <a href="https://github.com/kdliving14/adventure">Github</a></p> <p>( <a href="https://unsplash.com/photos/3OiYMgDKJ6k">Header image from here</a> )</p> ruby database programming Ruby Active Record Cheat Sheet Karter L. Wed, 14 Sep 2022 04:08:07 +0000 https://dev.to/kdliving14/ruby-active-record-cheat-sheet-35la https://dev.to/kdliving14/ruby-active-record-cheat-sheet-35la <p>Hello and welcome back to: Cheat Sheets with Karter. </p> <p>In today's cheat sheet we will be briefly looking at the beginning steps of ruby's active record functionality.</p> <p>Copy and paste this into a code editor and see all the pretty colors!<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>--------------------SET UP-------------------- # 1. Run in console to install gems in Gemfile bundle install # 2. do migrations (see RAKE CONSOLE COMMANDS & MIGRATION FILES) # Verify schema file is correct before continuing # 3. set up Class files if not set up (see CLASSES and everything below it) # Set up the has_many & belongs_to relationships first # 4. set up seeds.rb file if not set up for running tests (see SEED FILE) # Run in console to seed data bundle exec rake db:seed # 5. Run console (should have pry in Rakefile task) (see RUNNING TESTS) bundle exec rake console # can put binding.pry in code anywhere but reset console first # to get out of pry => control + D (on mac) #reset console/seeds if needed rake db:reset # clear console of previous tests (!does not reset console!) clear # Returns all the methods you can use User.methods # OR Ruby.methods -----------RAKE CONSOLE COMMANDS------------- # where v v what do name of file v bundle exec rake db:create_migration NAME=create_artists # write in generated file then can migrate using command below bundle exec rake db:migrate # check status of migration bundle exec rake db:migrate:status # if mistake, take back mistakes bundle exec rake db:rollback ---------------MIGRATION FILES--------------- # after doing => bundle exec rake db:create_migration NAME=______ class CreateArtists < ActiveRecord::Migration[6.1] def change # create a table called artists with columns (t) create_table :artists do |t| # v data type t.string :name # ^name of data (column name) # v lots of different data types t.string :birthdate t.integer :age t.float :price t.datetime :release_date t.text :description t.boolean :cool t.timestamps # ^ creates a created_at column and a updated_at column # id column auto generated for every table # DO NOT put symbols as part of a data name, 0/10 do not recommend end end end # in def change can also do these if not making table: # v table v new column v data type add_column :artists, :favorite_food, :string # v table v column v new data type change_column :artists, :birthdate, :datetime ---------------RUNNING TESTS------------------ # if testing an instance's association # EX: show all pets that belong to shelter Shelter.first.pets # => Class that owns thing . first instance . Class that belongs to it (lowercase and plural) # if testing the Class method # EX: return the oldest pet Pet.oldest # => Class . method in class -----------------SEED FILE-------------------- # make a file called seeds.rb in db folder # if you want to use id from one class in another, save to variable t1 = Class1.create(key:"value") # ids are auto generated, so no need to make them Class2.create(attached_id: t1.id, key1:"value1", key2:2, key3:false) # highly recommend doing: puts "Done!" # so that you know it didn't freeze on you. ------------------CLASSES------------------ # Must inherit Active Record in order to get all the cool shit class Dog < ActiveRecord::Base belongs_to :pet # Dog is part of Pet has_many :appointments # Dog has many appointments has_many :doctors, through: :appointments # Dog has many doctors through appointments @@dog_count = 0 # class variable def initialize # upon initialization super # do *initialize* from inherited files first # can take an arg EX: super(name) @@dog_count += 1 # add 1 to class variable end def get_adopted(owner_name) self.owner = owner_name # self refers to the instance of Dog that is being called end end # objects in Dog are accessed by dot notation fido = Dog.new("Fido") # fido = new instance of Dog, passing in "Fido" as name fido.get_adopted("Sophie") # sets "Sophie" as owner_name ------------------METHODS------------------ # v default value for name def greet_with_default (name="programmer") puts "Hello, #{name}!" end # def -> identifies it as a method # parentheses are optional if not passing data # last line of a method is the return value unless you put return # end -> end of method (always needed) ------------------------------------------ # keyword args make it less likely to break def happy_birthday(person:, current_age:) puts "Happy Birthday, #{person}" current_age += 1 puts "You are now #{current_age} years old" end # call the method with the keywords and values happy_birthday(current_age: 31, person: "Carmelo Anthony") ------------------------------------------ def self.method self.order end # ^self refers to class in both because it's in method name def method self end # ^self refers to an instance because it's not in method name =================ACTIVE RECORD METHODS====================== # more info: # https://guides.rubyonrails.org/active_record_querying.html # https://rubydoc.info/stdlib/core/Enumerable:group_by # https://apidock.com/ruby/Enumerable/group_by # vv inherit ActiveRecord to get the following vv # --------attr_accessors are built into Active Record-------- # Class => substitute name of class you want to use # Class_Instance => substitute instance of a class # Can combine things listed below!! Class.new(___:___) # creates new instance of class using variables listed in (__) # ex: Class.new(name: 'Jon') # not saved in db until run .save # can save to var to change instance variables separately Class_Instance.save # save changes of an instance to the database Class.create(___:___) # create a new entry of Class in database # .new + .save put together # ____ => variables, ex: Class.create(name: 'Jon') Class.update(____:____) # updates all instance vars to new data # also works on instance basis: self.update(__:__) or Class.first.update(__:__) Class_Instance.update(_____:_____) # updates instance to new data Class.all # returns all the records from the table as instances of Class Class.column_names # retrieves a list of all the columns in the table Class.find(_) # retrieve a Class object from database by id (_) Class.find_by(____:____) # find by any attribute # ____ => variables, ex: Class.find_by(name: 'Jon') # returns nil if not found Class.pluck(____) # returns array of all _____ of the instances of Class # EX: Class.pluck(:name) => returns a list of all the instance names in Class Class.where(___:___) # find but returns list of all that match query (___:___) Class.find_or_create_by(___:___) # Creates instance of class if it does not exist # ____ => variables, ex: Class.find_or_create_by(name: 'Jon') Class.order(___) # orders the instances for Class by ____ # EX: Class.order(:name) => orders instances by name Class.first # gets first instance created, can do second, third, etc Class.last # gets last instance created Class_Instance.destroy # deletes instance Class.destroy # deletes last instance created (returns deleted instances) Class.delete_all #deletes all instances (returns number of instances deleted) Class.destroy_all # deletes all instances (returns deleted instances) Class.sum(___) # adds up all of the keys that match Class.all.length # returns num of instances in Class Class_Instance.group_by {|p| p._____} # EX: (1..6).group_by { |i| i%3 } #=> {0=>[3, 6], 1=>[1, 4], 2=>[2, 5]} </code></pre> </div> <p>Please let me know if I'm missing anything :)</p> ruby beginners programming activerecord A Cheat Sheet for Ruby Karter L. Tue, 23 Aug 2022 01:33:05 +0000 https://dev.to/kdliving14/a-cheat-sheet-for-ruby-1ic8 https://dev.to/kdliving14/a-cheat-sheet-for-ruby-1ic8 <p>A lot of this can be cut out by Active Record and/or Rails but it's always good to know the bare bones. </p> <p>Below are brief references and explanations to some basic parts of Ruby code. I recommend copying this and pasting it into a code editor so it becomes color coded (and easier to read).</p> <h2> VARIABLE DECLARATIONS </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>attr_reader :age # makes "age" something you can only display, not edit (getter method) attr_writer :name # makes "name" something you can change, not display (setter method) attr_accessor :owner # makes "owner" able to display & edit (getter & setter) </code></pre> </div> <h2> METHODS </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># v default value def greet_with_default (name="programmer") puts "Hello, #{name}!" end # def -> identifies it as a method # parentheses are optional if not passing data # last line of a method is the return value unless you put return # end -> end of method (always needed) </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># using keyword arguments make it less likely to break (____:) def happy_birthday(person:, current_age:) puts "Happy Birthday, #{person}" current_age += 1 puts "You are now #{current_age} years old" end # call the method with the keywords and values happy_birthday(current_age: 31, person: "Carmelo Anthony") </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>def self.method self.order end # ^self refers to class in both because it's in method name def method self end # ^self refers to an instance because it's not in method name </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># initialize without knowing what arguments you have def initialize (args = nil) # upon initialization (start) accept (hash), default = nil if args # ^ if there is a hash do stuff # v go through each key in hash args.each_key do |key, value| # ^look at key & value self.class.attr_accessor(key) # ^ dynamically set methods automatically for all keys self.send("#{key}=", args[key]) # ^send attribute to the self's class end end end </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>private # any methods under "private" cannot be called by explicit receiver (Dog.privatemethod) # can be called by other methods </code></pre> </div> <h2> CLASSES </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>class Dog < Pet # Dog is inheriting all the stuff from Pet class (separate file) extend FancyDance::ClassMethods # get module class methods include FancyDance::InstanceMethods # get module instance methods @@dog_count = 0 # class variable def initialize # upon initialization super # do *initialize* from inherited file (Pet) first # can take an argument EX: super(name) @@dog_count += 1 # add 1 to class variable end def get_adopted(owner_name) self.owner = owner_name # self refers to the instance of Dog that is being called end end # objects in Dog are accessed by dot notation fido = Dog.new("Fido") # fido = new instance of Dog, passing in "Fido" as name fido.get_adopted("Sophie") # sets "Sophie" as owner </code></pre> </div> <h2> MODULES </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>module FancyDance # can nest modules module InstanceMethods def twirl "I'm twirling!" end def initialize self.class.all << self # put current instance in matching class array # EX: @@dog_list << self end end module ClassMethods def metadata "Dogs love to dance." end end end fido.twirl # instance output "I'm twirling!" Dog.metadata # class output "Dogs love to dance." </code></pre> </div> <h2> HASHES </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># only use bracket notation my_hash = { key1: "value1", key2: "value2" } my_hash[:key2] # => "value2" # Equivalent to: { :key1 => "value1", :key2 => "value2" } my_hash.keys # returns the keys in my_hash my_hash.values # returns the values in my_hash my_hash.empty? # eval if hash is empty (true/false value) my_hash.delete(:key1) # deletes (key1), returns edited hash my_hash.merge(other_hash) # returns edited my_hash with other_hash appended </code></pre> </div> <h2> ARRAYS </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>list.detect{|a| a.name == name} # returns the first element that matches (array only) # If no block, then it returns enumerator (name). list.include? "blah" # does list include "blah"? true/false value [1, 2, 3].sum # => 6 (adds values together) [1, 1, 2, 3, 3, 5, 5].uniq # => [1, 2, 3, 5] (returns only unique values) [1, 3, 400, 7].length # => 4 (returns number of items in array) [5, 100, 234, 7, 2].sort # => [2, 5, 7, 100, 234] (sorts smallest to largest) [1, 2, 3].reverse # => [3, 2, 1] (put in reverse order) list.count # counts amount of items in list list.first # returns first thing in array list.last # returns last thing in array list.push("M&Ms") list << "M&Ms" # Both put M&Ms at end of array, returns edited array list.unshift("Cake") # puts Cake at beginning of array, returns edited array list.pop # removes last item, returns removed item list.shift # removes first item, returns removed item list1.concat(list2) # combine arrays into original array (list1), returns edited array </code></pre> </div> <h2> STRINGS </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>var.gsub(' ', '-') # substitute space for dash (string only) first_name, last_name = full_name.split # default of split is by space (string only) </code></pre> </div> <h2> MAP / FILTER / FIND / SORT </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>def spicy_foods [ { name: 'Green Curry', cuisine: 'Thai', heat_level: 9 }, { name: 'Buffalo Wings', cuisine: 'American', heat_level: 3 }, { name: 'Mapo Tofu', cuisine: 'Sichuan', heat_level: 6 } ] end </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>#MAP the foods in the list by name, returns array of names spicy_foods.map{ |food| food[:name] } # Equivalent to: spicy_foods.map do |food| food[:name] end </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>#FILTER foods by heat level > 5, returns array of objects spicy_foods.filter{ |food| food[:heat_level] > 5 } # Equivalent to: spicy_foods.filter do |food| food[:heat_level] > 5 end </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>#FIND food that = what you are looking for, returns 1 object spicy_foods.find{ |food| food[:cuisine] == cuisine } # Equivalent to: spicy_foods.find do |food| food[:cuisine] == cuisine end </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>#SORT by given key (ASCII value), returns array of objects (no change array) # (<=>) combined comparison operator, returns: # 0 if the first operand equals the second, # -1 if the first operand is less than the second, and # 1 if the first operand is greater than the second. # sort method, need 2 objects passed to it spicy_foods.sort do |food1, food2| food1[:name] <=> food2[:name] end # sort_by only needs 1 element passed to it spicy_foods.sort_by {|food| food[:heat_level]} # Equivalent to: spicy_foods.sort_by do |food| food[:heat_level] end </code></pre> </div> <h2> LOOPS </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>num = 10 until num == 0 puts "#{num}" num -= 1 end #until the num = 0, count down </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>num = 0 while num <= 100 puts "#{num}" num += 1 end #while num is <= 100, count up </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>10.times do |i| puts "i is: #{i}" end # Equivalent to: 10.times { |i| puts "i is: #{i}" } </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># v range (1..20).each do |b| puts "#{b}" end # ^ puts value of b while iterating through range of 1-20 </code></pre> </div> <h2> PRINT TO CONSOLE </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>puts "Hello World!" # puts -> console.log() with line break @ end # makes the data into a string print "Hello" # print -> console.log() no line breaks p [1, 2, 3] # p -> output data in nicer format by calling .inspect # equivalent to calling v # puts [1, 2, 3].inspect pp [{ id: 1, hello: "World" }, { id: 2, hello: "Ruby" }, { id: 3, hello: "Moon" }, { id: 4, hello: "Learner" }] # pp -> pretty printing for complex data (nested arrays/hashes) </code></pre> </div> <p>Hope this was a good reference!</p> <p>Please let me know if you think I'm missing anything significant in the comments down below.</p> ruby beginners programming Common React Errors and how to Troubleshoot them Karter L. Wed, 03 Aug 2022 00:03:00 +0000 https://dev.to/kdliving14/common-react-errors-and-how-to-troubleshoot-them-57f5 https://dev.to/kdliving14/common-react-errors-and-how-to-troubleshoot-them-57f5 <p>I'm just going to put it out there: <em>react is the biggest baby there ever was</em>. If you forget a , or put in an extra ; the world will literally end. While sometimes it can be intuitive and tell you what is wrong, oftentimes the error messages are less than descriptive (if they show at at all).</p> <p>Below is a short list of errors I've received and how I troubleshoot them.</p> <p>BUT FIRST! Your saving grace should always be open: the <em><strong>console</strong></em>! That is where 99% of your error messages are going to be if they don't take up the page.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Yeqnv1-E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54d6q0vum5qjvsyxdhjr.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Yeqnv1-E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54d6q0vum5qjvsyxdhjr.png" alt="Image description" width="880" height="300"></a></p> <ol> <li>Missing , " > ] } )</li> </ol> <p>This one seems scary on the upset, but the solution is fairly easy to spot. The red arrows will point approximately where you need to look.</p> <p>In this case it is pointing to line 11, but it syntactically looks fine, what's the deal? Basically, the computer doesn't know what exactly is wrong, just that it all went down hill at that point. A good rule of thumb here is to look at indicated line and then at the line above because sometimes computers don't know what's wrong, just that something is wrong.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--u4TRRpA---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/687ien7l4974ijmqpucg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--u4TRRpA---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/687ien7l4974ijmqpucg.png" alt="Image description" width="880" height="330"></a></p> <ol> <li>Missing Definition or Typo</li> </ol> <p>This one seems pretty easy. I forgot to define <code>songs</code> in my component. However, when I look at my code:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U-mFNNtp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0twkrmu813xi8n7v47gf.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U-mFNNtp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0twkrmu813xi8n7v47gf.png" alt="Image description" width="880" height="771"></a></p> <p>I was trying to map <code>songs</code> that are passed into my component. What I passed into my component (<code>song</code>) should match what I'm trying to map (<code>songs</code>). So this particular error could also refer to typos. </p> <p>To help determine which is which: </p> <ul> <li>if it is an item you are passing in, make sure it matches. </li> <li>if it originates in the component/function you are working with, check to see if you put <code>const</code>, <code>let</code>, or <code>var</code> to define it.</li> </ul> <p>If that doesn't work: console log it! You'll be able to trace it from there.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9Mz1GIuP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfb963t3ew04frimd3r8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9Mz1GIuP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfb963t3ew04frimd3r8.png" alt="Image description" width="880" height="489"></a></p> <ol> <li>.map or .filter isn't a function</li> </ol> <p>Considering <code>.map()</code> and <code>.filter()</code> are built into react/javascript, you would think that it would be hard to mess them up but that is not the case.</p> <p>The key to troubleshooting this is in their definitions: </p> <p><em>The <code>map</code> method is used to traverse and display a list of similar <strong>objects</strong> of a component.</em></p> <p><em>The <code>filter</code> method is used to loop through an <strong>array</strong> while including or excluding elements inside that <strong>array</strong> based on a condition.</em></p> <p><code>.map()</code> and <code>.filter()</code> are unfortunately very specialized and do not know how to handle other types of data. <code>.map()</code> can only handle objects and <code>.filter()</code> can only handle arrays.</p> <p>Easy way to check what you are passing to the methods is to console log the variable (in this case it would be <code>songs</code>). You need to make sure that you are passing an object to <code>.map()</code> and an array to <code>.filter()</code> otherwise you will continue to get that error. </p> <p>Most errors when you are first starting out are just syntax errors or typos but there are some more advanced errors you could get. </p> <p>One surefire way to solve errors is by commenting out things one by one and console logging each input and output.</p> <p>I found <a href="https://blog.logrocket.com/8-common-react-error-messages-how-address-them/">this post</a> which goes into some more error messages if you want to learn more.</p> <p>Happy coding! </p> javascript react beginners programming How to Make Interactable Forms (with HTML & Javascript) Karter L. Tue, 12 Jul 2022 03:33:00 +0000 https://dev.to/kdliving14/how-to-make-interactable-forms-with-html-javascript-393l https://dev.to/kdliving14/how-to-make-interactable-forms-with-html-javascript-393l <p>Ok so you have your website looking pretty with headers, paragraphs of information, images, etc. but now you want something back: engagement and interactivity. But how? </p> <p>Your first step is in HTML.</p> <p>Not all forms are alike and depending on what you want to do, you may want to limit the user interaction, but there are some basics that are helpful to get started.</p> <p>Form Tag: The form tag is like a <code><div></code> that is specifically for things you want your user to interact with. There are, however, some cool differences between regular <code><div></code> and <code><form></code> that we'll get more into when we go into the Javascript portion.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><form id="example_form"></form> </code></pre> </div> <p>Within the opening <code><form></code> and closing <code></form></code> tags there are the following options:</p> <p>Text Box: Where the user is able to type in something to be submitted. When the form is submitted, this option will return what was typed in by the user as a string.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Textbox: <input id="name" type="text"/> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--q9J8KU3x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnku5h867cy97f28t6mx.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--q9J8KU3x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnku5h867cy97f28t6mx.png" alt="Textbox example" width="446" height="76"></a></p> <p>Big Textbox: This is just a bigger version of the text box listed above. Like above, this option will return the typed data from the user as a string. Difference here is that you can specify how big the box is with columns and rows.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><textarea cols="20" name="textbox" rows="5">Textbox</textarea> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vnXw5rPW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ia22uewcwofceee0u3.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vnXw5rPW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ia22uewcwofceee0u3.png" alt="Big Textbox example" width="381" height="186"></a></p> <p>Number Box: Where the user is able to either type or use the arrows on the side of the box to adjust the <code>value</code> (which can have a default as shown in the below example) the amount of <code>steps</code> indicated. Having <code>type = "number"</code> makes it so that you can increment and decrement using arrow keys, otherwise this would be a normal text box. This option will return the <code>value</code> when the form is submitted.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Number: <input id= "number_box" max="99" min="1" step="1" type="number" value="18"/> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uK_8DJzX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5gq17d5bhd9dp5b5ecd.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uK_8DJzX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5gq17d5bhd9dp5b5ecd.png" alt="Number box example" width="233" height="76"></a></p> <p>Drop Down Selection: Where the user is able to select from a number of predefined options through a drop down list. The text in between the <code><option></code> and <code><\option></code> tags is what the user sees. However, when they select Option 1, they will be returning the <code>value</code> of Option 1 ("opt1"). The <code>selected</code> tag indicates that the value it is attached to is the default selection (what the user will see when they first come across the form).<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Drop Down Selection <select id="drop_down_window"> <option selected="selected" value="opt1">Option 1</option> <option value="opt2">Option 2</option> </select> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DWzWpceS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oba6egexk5goutlt03h6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DWzWpceS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oba6egexk5goutlt03h6.png" alt="Drop Down example" width="466" height="69"></a></p> <p>Bubbles/Checkboxes: Where the user can select from predefined options through selecting the bubble/box associated with the option they would like to indicate. </p> <ul> <li>If you would like checkboxes, make <code>type = "checkbox"</code> </li> <li>If you would like bubbles, make <code>type = "radio"</code> </li> <li>The <code>checked</code> tag is used to indicate that it should be automatically checked before the user selects it.</li> <li>The <code>value</code> is what the application will actually return when the form is submitted.</li> <li>The <code>name</code> tag (if named the same between options) helps keep your <code>radio</code> buttons connected so that when you click one it unclicks the other </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><input checked="checked" name= "bubbles" type="radio" value="opt3"/> Option 3 <input name = "bubbles" type="radio" value="opt4"/> Option 4 <input type="checkbox"/> Checkbox </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZT8Fp_Fn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbbnigcojsg4dxjq6ljf.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZT8Fp_Fn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbbnigcojsg4dxjq6ljf.png" alt="Bubbles and Checkbox example" width="554" height="74"></a></p> <p>Submit Button: Finally, how to actually submit the information! This code makes a button. The <code>value</code> tag is also the label of the button (aka visible to the user). Buttons can trigger a <code>submit</code> event (more details on that later).<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><input type="submit" value="Submit"/> </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C2iGC8cs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cgvp8b1qsy04pliax4s.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C2iGC8cs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cgvp8b1qsy04pliax4s.png" alt="Submit Button example" width="147" height="73"></a></p> <p>You've got all that, but it doesn't do anything, why? We haven't told our application to listen for it. We will be doing that with step 2: Javascript.</p> <p>I am going to be assuming you have used an <code>eventListener</code> before but if not, please see <a href="https://www.makeuseof.com/javascript-event-listeners-how-to-use/">this</a> on the basics of how to use one. </p> <p>Let's jump in: </p> <ol> <li><p>First you need to select your form from your HTML document using <code>document.querySelector(____)</code> or <code>document.getElementById(____)</code> (I don't recommend getting it by class names just in case you want to have more than one form.) The blank should be the identifier for the form (id, class, name, tag, etc)</p></li> <li><p>(Here's where we get to the cool part!) Add your <code>Event Listener</code> with the event type of <code>"submit"</code> and either call a callback function to deal with the data or make a function inside like the example below:<br> </p></li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>document.querySelector("#form").addEventListener("submit", e => { e.preventDefault(); const userInput = document.querySelector("#name").value; document.querySelector("#form").reset() }) </code></pre> </div> <ul> <li><p><code>.preventDefault()</code> is piece of code that prevents the page from automatically reloading when you submit a form. This is helpful so that you can actually capture the information given on the form instead of it being wiped away with the refresh.</p></li> <li><p>Because we added an event listener to the <code>form</code> and listened for the <code>submit</code>, all the user input inside the <code><form></code> tags has been submitted! All we need to do is access it by finding the id tag (in this case <code>"#name</code>) of the input in question and using <code>.value</code> which will return the value of the targeted input. </p></li> <li><p>After you've received the values, I recommend wiping the form with <code>.reset()</code> if you are not going to redirect the page or hide the form after completion so that there is no confusion as to whether or not your user has submitted the form.</p></li> </ul> <p>Now, you can do all sorts of things with user submitted information but my last brain cell has just died so now it is up to you to do with this information what you will...</p> <p>Good luck!</p> <p>***********************<strong><em>RESOURCE</em></strong>***********************<br> <a href="https://htmlcheatsheet.com/">HTML CHEAT SHEET</a></p> html javascript tutorial