Jump to content

brooke_theperson

Members
  • Content Count

    73
  • Joined

  • Last visited

Community Reputation

0 Neutral

About brooke_theperson

  • Rank
    Newbie
  • Birthday 03/15/2001

Previous Fields

  • Languages
    html, javascript

Profile Information

  • Gender
    Male
  • Interests
    Dance, coding, music, supernatural
  1. So I am just working on this project in notepad. Where would I find error messages?
  2. So I am working on a simple client database type program. I have a clients array that stores new clients that all have a first name, last name, phone number, etc... I also want the user to be able to add notes about their clients' family. So, one of the parameters of the client function is an array called familyNotes. Here is the code for this: function client(firstName, lastName, phoneNumber, address, hireDate, frequency, cost, entry, familyNotes) { this.firstName = firstName; this.lastName = lastName; this.phoneNumber = phoneNumber; this.address = address; this.hireDate = hireDate; this.frequency = frequency; this.cost = cost; this.entry = entry; this.familyNotes - familyNotes; } var laura = new client("laura", "simmerman", "1111111111", "laura rd", "01/01/01", "weekly", "100", "garage-1111"); var jana = new client("jana", "simmerman", "2222222222", "jana rd", "01/01/01", "weekly", "100", "garage-2222"); var clients = [laura, jana]; However, I do not know if the familyNotes array is working properly. I have a function that prompts the user to add a note about the family of a client, then adds the note to the array. Here is the code for this function: function addFamilyNotes(i) { var note = prompt("Add a note about the family: "); document.getElementById("familyNotes").innerHTML += "<li>" + note + "</li>"; clients[i].familyNotes.push(note); } I later have a function that is supposed to alert the length of the familyNotes array, however it doesn't alert anything currently. Here is the code: function familyNotesAlert(i) { alert(clients[i].familyNotes.length); } Does anyone know what I am doing wrong? Why is the alert not showing, and is anything actually being added to the familyNotes array?
  3. So I fixed this. I now see that it must be ==, but now I can click the button and it switches once and won't work after the second click? This is my new uncomplete script: <script> var slide = 0; $(document).ready(function(){ $('#rightarrow').click(function(){ slide = slide + 1 if (slide == 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>gravity forms protostar</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>fusion starts and a star forms</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } }); $('#leftarrow').click(function(){ slide = slide - 1 if (slide == 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css('border', '2px solid black').css('color', 'black'); } }); }); </script>
  4. Here is my code. I have two arrows and they go to the next 'slide' and previous 'slide'. For someone reason clicking the buttons doesn't 'switch slides'. Is there anything wrong? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <style> body{ background-color: black; } h3{ color: white; font-family: corsiva; text-align: center; } .maindiv{ height: 450px; width: 800px; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 50px; } #leftarrow{ height: 40px; width: 100px; border: 2px solid black; margin-top: 140px; margin-left: 100px; color: black; text-align: center; font-size: 20px; background-color: black; } #rightarrow{ height: 40px; width: 100px; border: 2px solid white; margin-top: -140px; margin-left: 600px; color: white; text-align: center; font-size: 20px; background-color: black; position: absolute; } #image{ height: 250px; width: 300px; border: 2px solid white; margin-top: -150px; margin-left: 250px; } #explanation{ height: 100px; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid white; margin-top: 20px; } </style> <script> $(document).ready(function(){ var slide = 0; $('#rightarrow').click(function(){ slide = slide + 1; if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); $('#leftarrow').click(function(){ slide = slide - 1; if (slide = 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css("color", "black").css("border", "2px solid black"); } if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); </script> <body> <h3><u>Life Cycles of Stars</u></h3> <div class = 'maindiv'> <button id = 'leftarrow'>Previous</button> <div id = 'image'></div> <button id = 'rightarrow'>Next</button> <div id = 'explanation'>Animation</div> </div> </body> </html>
  5. So I have multiple divs each containing a list and the headers in each div, above the list are all at different y places. The lists with the most info have higher y positions and therefore are higher up on the page. How do I make it so the headers are in line with eachother? (If you copy this code, and add a heading and stuff you can open it up in firefox and see what im talking about) <style> h2{ text-decoration: underline; margin-top: -30px; } .anke{ display: inline-block; margin-left: 60px; font-family: corsiva; font-size: 20px; } .father{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .mother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .brother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .sister{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .others{ display: inline-block; margin-top: 20px; margin-left: 120px; font-family: corsiva; font-size: 20px; } </style> <body> <div class = 'anke'> <h2>Anke</h2> <ul> <li>Main Character</li> <li>Doesn't fit in with family</li> <li>Isn't abused</li> <li>Isn't loved</li> <li>Loves to play volleyball</li> <li>Is smart</li> </ul> </div> <div class = 'father'> <h2>Father</h2> <ul> <li>Abusive</li> <li>Moody</li> <li>Mood Swings</li> <li>Loves his wife</li> <li>Often drunk</li> </ul> </div> <div class = 'mother'> <h2>Mother</h2> <ul> <li>Sweet Mother</li> <li>Loves her children</li> <li>Takes care of husband</li> <li>Secretly scared</li> </ul> </div> <div class = 'sister'> <h2>Sister</h2> <ul> <li>Name is Yaicha</li> <li>Older Sister</li> <li>Likes makeup</li> <li>Constantly abused</li> </ul> </div> <div class = 'brother'> <h2>Brother</h2> <ul> <li>Name is Darren</li> <li>Older Brother</li> <li>Constantly abused</li> </ul> </div> <div class = 'others'> <h2>Other Characters</h2> <ol> <li>Angelina <ul> <li>Annoying 'friend' of Anke</li> <li>Very innocent</li> <li>Doesn't have a dad</li> <li>Likes Anke's dad (as a father)</li> </ul> </li> </ol> </div> </body>
  6. Thank you so much for all of your help. The whole time I was thinking of the '.body' div as the 'homepageappend' div, when really it is the larger div in which everything is nested. Also, thanks for making me figure it out with hints. Really helped.
  7. I'm sorry but I'm still very confused. Could you fix the code and highlight what you fixed about it? I am really struggling.
  8. So I changed my code to this, and it still doesn't work? $('.body').on('mouseenter', '.aimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.body').on('mouseleave', '.aimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.bimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw</p>"); }); $('.body').on('mouseleave', '.bimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.cimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70</p>"); }); $('.body').on('mouseleave', '.cimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.dimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ</p>"); }); $('.body').on('mouseleave', '.dimg', function(){ $('.imagesource').empty(); });
  9. Is this right, or should I be using the .on() somewhere else, because it still isn't working? $('.aimg').on('mouseenter', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.aimg').on('mouseleave', function(){ $('.imagesource').empty(); });
  10. Hey so I have this code, and I start out with my homepage on the screen. If I hover over some images they glow and the source shows up beneath them. Later, if I click the homepage button on my sidebar, it shows the homepage again. This time when I hover over the images they glow, but don't show the image source. Is there something wrong with this code? Please help <script>$(document).ready(function(){ $('.homepage').click(function(){ $('.body').empty(); $('.body').append("<div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>"); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); }); }); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); });});</style> <body> <div class = 'page'> <div class = 'header'>Hacking the School Computer System</div> <div class = 'sidebar'> <button class = 'homepage'>Homepage</button> <button class = 'page2'>Page 2</button> <button class = 'page3'>Page 3</button> <button class = 'page4'>Page 4</button> </div> <div class = 'body'> <div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div> <div class = 'imagesource'></div> </div> <div class = 'footer'>Created by Brooke Simmerman</div> </div></body>
  11. So, I do not have a specific code, but I just want to understand collision. I guess an example that I am thinking of is agar.io. I have read many examples about collision, or how in agar.io the cells eat eachother, and it just doesn't make sense. Could anybody please explain it to me, and use it in an extremely simple code. I am very much a beginner. I have learned about html, javascript, and jquery using codecademy, but I am not experienced!! Could someone please give me a simple explanation of how to make 'cells eat eachother' using a simple code. Again, I am a beginner! Thanks for any help.
  12. So, I have a code that asks a question, and if the answer in correct, it says correct in the div. If incorrect, it says incorrect. For some reason it always says incorrect even if my answer is correct. Please help, is there anything wrong with this code? //*If players 1 turn if (player == "1"){ //*Asks question var trivia = prompt(questions_obj.question); //*If answer is corerct do stuff if (trivia === questions_obj.answer){ document.getElementById('correctincorrect').innerHTML = "Correct"; $('#character1').animate({left: "+=75px"}, 500, function(){ //*If player gets to finish they win if (player1total == "8"){ var winner1 = alert("Player 1 is the winner!"); $('#character1').remove(); $('#character2').remove(); $('#character3').remove(); $('#player1score').remove(); $('#player2score').remove(); $('#player3score').remove(); $('#player1header').remove(); $('#player2header').remove(); $('#player3header').remove(); $('#player1board').remove(); $('#player2board').remove(); $('#player3board').remove(); } }); //*Adds up players score player1total = player1total + 1; document.getElementById("player1score").innerHTML = player1total; } if (trivia === questions_obj.answer2){ document.getElementById('correctincorrect').innerHTML = "Correct"; $('#character1').animate({left: "+=75px"}, 500, function(){ //*If player gets to finish they win if (player1total == "8"){ document.getElementById('correctincorrect').innerHTML = "Player 1 is the winner!"; $('#character1').remove(); $('#character2').remove(); $('#character3').remove(); $('#player1score').remove(); $('#player2score').remove(); $('#player3score').remove(); $('#player1header').remove(); $('#player2header').remove(); $('#player3header').remove(); $('#player1board').remove(); $('#player2board').remove(); $('#player3board').remove(); } }); //*Adds up players score player1total = player1total + 1; document.getElementById("player1score").innerHTML = player1total; } if (trivia != questions_obj.answer || trivia != questions_obj.answer2){ document.getElementById('correctincorrect').innerHTML = "Incorrect"; }}
  13. Thanks so much, this fixed my problem!
×
×
  • Create New...