├── Wake a Mole ├── README.md ├── dirt.png ├── mole.jpg ├── mole.png ├── index.html ├── script.js └── styles.css ├── 2D Canvas Game ├── README.md ├── styles.css ├── JavaScript 2D Brick Breaker Game.png ├── index.html └── app.js ├── Countdown Timer ├── README.md ├── javascript countdown timer.png ├── style.css ├── index.html └── app.js ├── Day of the Week App ├── README.md ├── javascript day of week project.png ├── index.html ├── style.css └── app.js ├── Quote of Day Project ├── README.md ├── quotes generator javascript project pic.png ├── quotes.css ├── index.html └── quotes.js ├── BMI Calculator ├── README.md ├── javascript bmi cal project.png ├── style.css ├── index.html └── script.js ├── Digital Clock ├── README.md ├── javascript digital clock.png ├── app.js ├── index.html └── style.css ├── Number Guessing Game ├── README.md ├── JavaScript Number Guessing Game.png ├── index.html ├── style.css └── app.js ├── Color Changing App ├── README.md ├── javascript color change app.png ├── app.js ├── index.html └── style.css ├── Desktop Calculator ├── README.md ├── javascipt-basic-calculator.png ├── style.css ├── index.html └── app.js ├── JavaScript Image Slider ├── README.md ├── images │ ├── image1.png │ ├── image2.png │ ├── image3.png │ ├── image4.png │ ├── left-arrow.png │ └── right-arrow.png ├── javascript-image-slider.png ├── style.css ├── index.html └── app.js ├── RSS News Feed Project ├── README.md ├── javascript feed reader.png ├── iconfinder_rss-feeds_88489.png ├── index.html ├── style.css └── app.js ├── Background Color Switcher ├── README.md ├── JavaScript Background Color Switcher.png ├── style.css ├── app.js └── index.html ├── Event Countdown Timer ├── README.md ├── javascript countdown timer.png ├── style.css ├── index.html └── app.js ├── Greeting Message Project ├── README.md ├── style.css ├── JavaScript Greeting Message Project.png ├── index.html └── app.js ├── Interactive Quiz Project ├── README.md ├── javascript interactive quiz project.png ├── index.html ├── style.css └── app.js ├── Math Addition App Project ├── README.md ├── math addition app project.png ├── index.html ├── app.js └── style.css ├── Mortgage Loan Calculator ├── README.md ├── mortgage loan javascript project.png ├── loancalculator.css ├── loancalculator.js └── index.html ├── Balloon Popping Game ├── README.md ├── javascript balloon popping project.png ├── app.js ├── style.css └── index.html ├── Lightbulb Effect Project ├── README.md ├── lightoff.png ├── lighton.png ├── JavaScript Lightswitch Project.png ├── app.js ├── style.css └── index.html ├── TodoList Project BlueLime Solution ├── README.md ├── todolist project bluelime.png ├── index.html ├── Todo List Project - My Solution │ ├── index.html │ ├── style.css │ └── app.js ├── style.css └── app.js ├── Change_Color_Background ├── css │ └── style.css ├── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.ttf │ ├── fa-solid-900.eot │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-solid-900.woff2 │ └── fa-regular-400.woff2 ├── js │ └── script.js └── index.html ├── Weight Conversion Tool ├── README.md ├── javascript pound to kilogram calculator.png ├── styles.css ├── index.html └── app.js ├── Analogue Clock ├── README.md ├── clock.css ├── index.html └── clock.js ├── Filter Project ├── img │ ├── cake-1.jpeg │ ├── cake-2.jpeg │ ├── cake-3.jpeg │ ├── sweets-1.jpeg │ ├── sweets-2.jpeg │ ├── sweets-3.jpeg │ ├── z-cake-2.jpeg │ ├── cupcake-1.jpeg │ ├── cupcake-2.jpeg │ ├── cupcake-3.jpeg │ ├── doughnut-1.jpeg │ ├── doughnut-2.jpeg │ ├── doughnut-3.jpeg │ ├── headerBcg.jpeg │ ├── z-sweets-3.jpeg │ └── logo.svg ├── css │ └── style.css └── index.html ├── Budget OOP Project ├── img │ ├── contBcg-0.jpeg │ ├── contBcg-1.jpeg │ ├── contBcg-2.jpeg │ ├── contBcg-3.jpeg │ ├── contBcg-4.jpeg │ └── Facebook-1s-200px.gif ├── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.ttf │ ├── fa-solid-900.eot │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-solid-900.woff2 │ └── fa-regular-400.woff2 ├── JavaScript OOP Budget App.jpg ├── css │ └── main.css ├── index.html └── js │ └── app.js ├── Background Image Slider Project ├── img │ ├── contBcg-0.jpeg │ ├── contBcg-1.jpeg │ ├── contBcg-2.jpeg │ ├── contBcg-3.jpeg │ └── contBcg-4.jpeg ├── webfonts │ ├── fa-solid-900.eot │ ├── fa-solid-900.ttf │ ├── fa-brands-400.eot │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-solid-900.woff │ ├── fa-solid-900.woff2 │ └── fa-regular-400.woff2 ├── js │ └── app.js ├── index.html └── css │ └── main.css ├── Contact Form Project ├── contact form local storage.png ├── app.js ├── index.html └── style.css ├── Word Count Tool ├── javascript word length calculator.png ├── app.js ├── index.html └── style.css ├── Height Conversion Tool ├── JavaScript Height Conversion Tool.png ├── index.html ├── app.js └── style.css ├── Percentage Tip Calculator ├── JavaScript Tip Percentage Calculator.png ├── index.html ├── style.css └── app.js ├── Calculate Change └── calculateChange.js ├── Centimeters Converter └── centimetersConv.js └── README.md /Wake a Mole/README.md: -------------------------------------------------------------------------------- 1 | # whack-a-mole 2 | -------------------------------------------------------------------------------- /2D Canvas Game/README.md: -------------------------------------------------------------------------------- 1 | # 2D-break-breaker 2 | -------------------------------------------------------------------------------- /Countdown Timer/README.md: -------------------------------------------------------------------------------- 1 | # countdown-timer-2 2 | -------------------------------------------------------------------------------- /Day of the Week App/README.md: -------------------------------------------------------------------------------- 1 | # day-of-week-app 2 | -------------------------------------------------------------------------------- /Quote of Day Project/README.md: -------------------------------------------------------------------------------- 1 | # quote-generator 2 | -------------------------------------------------------------------------------- /BMI Calculator/README.md: -------------------------------------------------------------------------------- 1 | # bmi-calc-javascript-project 2 | -------------------------------------------------------------------------------- /Digital Clock/README.md: -------------------------------------------------------------------------------- 1 | # javascript-digital-clock 2 | -------------------------------------------------------------------------------- /Number Guessing Game/README.md: -------------------------------------------------------------------------------- 1 | # number-guessing-game 2 | -------------------------------------------------------------------------------- /Color Changing App/README.md: -------------------------------------------------------------------------------- 1 | # javascript-color-change-app 2 | -------------------------------------------------------------------------------- /Desktop Calculator/README.md: -------------------------------------------------------------------------------- 1 | # javascript-basic-calculator 2 | -------------------------------------------------------------------------------- /JavaScript Image Slider/README.md: -------------------------------------------------------------------------------- 1 | # javascript-image-slider 2 | -------------------------------------------------------------------------------- /RSS News Feed Project/README.md: -------------------------------------------------------------------------------- 1 | # javascript-rss-feedreader 2 | -------------------------------------------------------------------------------- /Background Color Switcher/README.md: -------------------------------------------------------------------------------- 1 | # background-color-switcher 2 | -------------------------------------------------------------------------------- /Event Countdown Timer/README.md: -------------------------------------------------------------------------------- 1 | # javascript-countdown-timer 2 | -------------------------------------------------------------------------------- /Greeting Message Project/README.md: -------------------------------------------------------------------------------- 1 | # greeting-message-project 2 | -------------------------------------------------------------------------------- /Interactive Quiz Project/README.md: -------------------------------------------------------------------------------- 1 | # javascript-quiz-project 2 | -------------------------------------------------------------------------------- /Math Addition App Project/README.md: -------------------------------------------------------------------------------- 1 | # math-addition-app-project 2 | -------------------------------------------------------------------------------- /Mortgage Loan Calculator/README.md: -------------------------------------------------------------------------------- 1 | # mortgage-loan-calculator 2 | -------------------------------------------------------------------------------- /Balloon Popping Game/README.md: -------------------------------------------------------------------------------- 1 | # javascript-balloon-popping-project 2 | -------------------------------------------------------------------------------- /Lightbulb Effect Project/README.md: -------------------------------------------------------------------------------- 1 | # javascript-light-switch-project 2 | -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/README.md: -------------------------------------------------------------------------------- 1 | # bluelime-todo-list 2 | -------------------------------------------------------------------------------- /Change_Color_Background/css/style.css: -------------------------------------------------------------------------------- 1 | button { 2 | margin-top: 50vh 3 | } -------------------------------------------------------------------------------- /Weight Conversion Tool/README.md: -------------------------------------------------------------------------------- 1 | #weight-converter 2 | 3 | Small pound to kilogram weight conversion add. -------------------------------------------------------------------------------- /Analogue Clock/README.md: -------------------------------------------------------------------------------- 1 | # analogue clock 2 | 3 | An analogue clock that uses JavaScript and the Canvas Web API 4 | -------------------------------------------------------------------------------- /Wake a Mole/dirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Wake a Mole/dirt.png -------------------------------------------------------------------------------- /Wake a Mole/mole.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Wake a Mole/mole.jpg -------------------------------------------------------------------------------- /Wake a Mole/mole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Wake a Mole/mole.png -------------------------------------------------------------------------------- /2D Canvas Game/styles.css: -------------------------------------------------------------------------------- 1 | #mycanvas{ 2 | background-color: #31f0f0; 3 | margin: 125px 0px 125px 295px; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Filter Project/img/cake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cake-1.jpeg -------------------------------------------------------------------------------- /Filter Project/img/cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cake-2.jpeg -------------------------------------------------------------------------------- /Filter Project/img/cake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cake-3.jpeg -------------------------------------------------------------------------------- /Filter Project/img/sweets-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/sweets-1.jpeg -------------------------------------------------------------------------------- /Filter Project/img/sweets-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/sweets-2.jpeg -------------------------------------------------------------------------------- /Filter Project/img/sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/sweets-3.jpeg -------------------------------------------------------------------------------- /Filter Project/img/z-cake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/z-cake-2.jpeg -------------------------------------------------------------------------------- /Analogue Clock/clock.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #000; 3 | } 4 | 5 | #canvas{ 6 | margin-left: 300px; 7 | margin-top: 50px; 8 | } -------------------------------------------------------------------------------- /Filter Project/img/cupcake-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cupcake-1.jpeg -------------------------------------------------------------------------------- /Filter Project/img/cupcake-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cupcake-2.jpeg -------------------------------------------------------------------------------- /Filter Project/img/cupcake-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/cupcake-3.jpeg -------------------------------------------------------------------------------- /Filter Project/img/doughnut-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/doughnut-1.jpeg -------------------------------------------------------------------------------- /Filter Project/img/doughnut-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/doughnut-2.jpeg -------------------------------------------------------------------------------- /Filter Project/img/doughnut-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/doughnut-3.jpeg -------------------------------------------------------------------------------- /Filter Project/img/headerBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/headerBcg.jpeg -------------------------------------------------------------------------------- /Filter Project/img/z-sweets-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Filter Project/img/z-sweets-3.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/img/contBcg-0.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/contBcg-0.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/img/contBcg-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/contBcg-1.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/img/contBcg-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/contBcg-2.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/img/contBcg-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/contBcg-3.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/img/contBcg-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/contBcg-4.jpeg -------------------------------------------------------------------------------- /Lightbulb Effect Project/lightoff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Lightbulb Effect Project/lightoff.png -------------------------------------------------------------------------------- /Lightbulb Effect Project/lighton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Lightbulb Effect Project/lighton.png -------------------------------------------------------------------------------- /Digital Clock/javascript digital clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Digital Clock/javascript digital clock.png -------------------------------------------------------------------------------- /Greeting Message Project/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: lime; 3 | font-size: 4.65em; 4 | text-align: center; 5 | margin-top: 150px; 6 | } -------------------------------------------------------------------------------- /JavaScript Image Slider/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/image1.png -------------------------------------------------------------------------------- /JavaScript Image Slider/images/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/image2.png -------------------------------------------------------------------------------- /JavaScript Image Slider/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/image3.png -------------------------------------------------------------------------------- /JavaScript Image Slider/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/image4.png -------------------------------------------------------------------------------- /BMI Calculator/javascript bmi cal project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/BMI Calculator/javascript bmi cal project.png -------------------------------------------------------------------------------- /Budget OOP Project/img/Facebook-1s-200px.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/img/Facebook-1s-200px.gif -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /JavaScript Image Slider/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/left-arrow.png -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /Countdown Timer/javascript countdown timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Countdown Timer/javascript countdown timer.png -------------------------------------------------------------------------------- /JavaScript Image Slider/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/images/right-arrow.png -------------------------------------------------------------------------------- /Background Image Slider Project/img/contBcg-0.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/img/contBcg-0.jpeg -------------------------------------------------------------------------------- /Background Image Slider Project/img/contBcg-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/img/contBcg-1.jpeg -------------------------------------------------------------------------------- /Background Image Slider Project/img/contBcg-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/img/contBcg-2.jpeg -------------------------------------------------------------------------------- /Background Image Slider Project/img/contBcg-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/img/contBcg-3.jpeg -------------------------------------------------------------------------------- /Background Image Slider Project/img/contBcg-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/img/contBcg-4.jpeg -------------------------------------------------------------------------------- /Budget OOP Project/JavaScript OOP Budget App.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/JavaScript OOP Budget App.jpg -------------------------------------------------------------------------------- /Budget OOP Project/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Budget OOP Project/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /Color Changing App/javascript color change app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Color Changing App/javascript color change app.png -------------------------------------------------------------------------------- /Desktop Calculator/javascipt-basic-calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Desktop Calculator/javascipt-basic-calculator.png -------------------------------------------------------------------------------- /RSS News Feed Project/javascript feed reader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/RSS News Feed Project/javascript feed reader.png -------------------------------------------------------------------------------- /2D Canvas Game/JavaScript 2D Brick Breaker Game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/2D Canvas Game/JavaScript 2D Brick Breaker Game.png -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /Contact Form Project/contact form local storage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Contact Form Project/contact form local storage.png -------------------------------------------------------------------------------- /Event Countdown Timer/javascript countdown timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Event Countdown Timer/javascript countdown timer.png -------------------------------------------------------------------------------- /JavaScript Image Slider/javascript-image-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/JavaScript Image Slider/javascript-image-slider.png -------------------------------------------------------------------------------- /RSS News Feed Project/iconfinder_rss-feeds_88489.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/RSS News Feed Project/iconfinder_rss-feeds_88489.png -------------------------------------------------------------------------------- /Change_Color_Background/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Change_Color_Background/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /Day of the Week App/javascript day of week project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Day of the Week App/javascript day of week project.png -------------------------------------------------------------------------------- /Math Addition App Project/math addition app project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Math Addition App Project/math addition app project.png -------------------------------------------------------------------------------- /Word Count Tool/javascript word length calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Word Count Tool/javascript word length calculator.png -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /Number Guessing Game/JavaScript Number Guessing Game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Number Guessing Game/JavaScript Number Guessing Game.png -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /Balloon Popping Game/javascript balloon popping project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Balloon Popping Game/javascript balloon popping project.png -------------------------------------------------------------------------------- /Height Conversion Tool/JavaScript Height Conversion Tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Height Conversion Tool/JavaScript Height Conversion Tool.png -------------------------------------------------------------------------------- /Lightbulb Effect Project/JavaScript Lightswitch Project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Lightbulb Effect Project/JavaScript Lightswitch Project.png -------------------------------------------------------------------------------- /Lightbulb Effect Project/app.js: -------------------------------------------------------------------------------- 1 | const light = document.querySelector('#bulb'); 2 | 3 | light.addEventListener('click', function(e){ 4 | 5 | e.target.classList.toggle('bulb-on'); 6 | 7 | }) -------------------------------------------------------------------------------- /Background Image Slider Project/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Image Slider Project/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /Mortgage Loan Calculator/mortgage loan javascript project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Mortgage Loan Calculator/mortgage loan javascript project.png -------------------------------------------------------------------------------- /Greeting Message Project/JavaScript Greeting Message Project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Greeting Message Project/JavaScript Greeting Message Project.png -------------------------------------------------------------------------------- /Interactive Quiz Project/javascript interactive quiz project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Interactive Quiz Project/javascript interactive quiz project.png -------------------------------------------------------------------------------- /Quote of Day Project/quotes generator javascript project pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Quote of Day Project/quotes generator javascript project pic.png -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/todolist project bluelime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/TodoList Project BlueLime Solution/todolist project bluelime.png -------------------------------------------------------------------------------- /Background Color Switcher/JavaScript Background Color Switcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Background Color Switcher/JavaScript Background Color Switcher.png -------------------------------------------------------------------------------- /Digital Clock/app.js: -------------------------------------------------------------------------------- 1 | 2 | let clock = document.getElementById('clock'); 3 | 4 | setInterval(function(){ 5 | let date = new Date(); 6 | clock.innerHTML = date.toLocaleTimeString(); 7 | }, 1000) 8 | 9 | -------------------------------------------------------------------------------- /Percentage Tip Calculator/JavaScript Tip Percentage Calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Percentage Tip Calculator/JavaScript Tip Percentage Calculator.png -------------------------------------------------------------------------------- /Weight Conversion Tool/javascript pound to kilogram calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romeojeremiah/javascript-projects-for-beginners/HEAD/Weight Conversion Tool/javascript pound to kilogram calculator.png -------------------------------------------------------------------------------- /Event Countdown Timer/style.css: -------------------------------------------------------------------------------- 1 | p{ 2 | text-align: center; 3 | font-size: 125px; 4 | } 5 | P#root{ 6 | color: blue; 7 | font-size: 150px; 8 | } 9 | 10 | body{ 11 | background-color: yellow; 12 | color: black; 13 | } -------------------------------------------------------------------------------- /Weight Conversion Tool/styles.css: -------------------------------------------------------------------------------- 1 | form { 2 | background-color: blue; 3 | color: white; 4 | width: 500px; 5 | height: 300px; 6 | margin: 100px auto 100px; 7 | padding: 25px; 8 | } 9 | 10 | .error{ 11 | color: red; 12 | } 13 | 14 | .no-error{ 15 | color: rgb(0, 255, 0); 16 | } -------------------------------------------------------------------------------- /Word Count Tool/app.js: -------------------------------------------------------------------------------- 1 | let button = document.getElementById('btn'); 2 | 3 | button.addEventListener('click', function(){ 4 | let word = document.getElementById('str').value; 5 | let count = word.length; 6 | let outputDiv = document.getElementById('output'); 7 | 8 | outputDiv.innerHTML = `

${count}

` 9 | }); 10 | -------------------------------------------------------------------------------- /Quote of Day Project/quotes.css: -------------------------------------------------------------------------------- 1 | div { 2 | text-align: center; 3 | } 4 | 5 | h1 { 6 | font-size: 80px; 7 | font-family: Impact; 8 | } 9 | 10 | button { 11 | width: 250px; 12 | height: 80px; 13 | background-color: blue; 14 | color: white; 15 | } 16 | 17 | p{ 18 | font-size: 35px; 19 | } 20 | 21 | button:hover{ 22 | background-color: green; 23 | } 24 | -------------------------------------------------------------------------------- /Greeting Message Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Greetings 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Desktop Calculator/style.css: -------------------------------------------------------------------------------- 1 | input { 2 | width: 150px; 3 | height: 100px; 4 | font-size: 75px; 5 | border-radius: 10px; 6 | margin: 10px; 7 | background-color: #000; 8 | color: #fff; 9 | border-style: none; 10 | } 11 | 12 | #myform { 13 | margin-left: 225px; 14 | margin-top: 20px; 15 | } 16 | 17 | h1{ 18 | text-align: center; 19 | font-size: 80px; 20 | margin-right: 150px; 21 | margin-top:20px; 22 | } -------------------------------------------------------------------------------- /Lightbulb Effect Project/style.css: -------------------------------------------------------------------------------- 1 | .canvas{ 2 | width: 600px; 3 | height: 500px; 4 | margin: 50px auto; 5 | text-align: center; 6 | box-sizing: border-box; 7 | } 8 | 9 | .bulb-off{ 10 | width: 265px; 11 | height: 400px; 12 | background: url('lightoff.png') no-repeat; 13 | margin: auto; 14 | } 15 | 16 | .bulb-on{ 17 | width: 265px; 18 | height: 400px; 19 | background: url('lighton.png') no-repeat;; 20 | margin: auto; 21 | } -------------------------------------------------------------------------------- /Mortgage Loan Calculator/loancalculator.css: -------------------------------------------------------------------------------- 1 | #loancal { 2 | width: 375px; 3 | height: 295px; 4 | background-color:#000; 5 | color: #fff; 6 | margin-left: 275px; 7 | margin-top: 95px; 8 | padding-left: 90px; 9 | padding-top: 20px; 10 | } 11 | 12 | #months, #amount, #interest_rate{ 13 | width: 175px; 14 | height: 20px; 15 | 16 | } 17 | 18 | #interest_rate { 19 | margin-left: 2px; 20 | } 21 | 22 | h1 { 23 | font-size:40px; 24 | } -------------------------------------------------------------------------------- /Analogue Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Analogue Clock 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Change_Color_Background/js/script.js: -------------------------------------------------------------------------------- 1 | //Choose a random color 2 | const button = document.querySelector('button') 3 | const body = document.querySelector('body') 4 | const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple'] 5 | 6 | body.style.backgroundColor = 'violet' 7 | button.addEventListener('click', changeBackground) 8 | 9 | function changeBackground(){ 10 | const colorIndex= parseInt(Math.random()*colors.length+1) 11 | body.style.backgroundColor = colors[colorIndex] 12 | } 13 | -------------------------------------------------------------------------------- /Calculate Change/calculateChange.js: -------------------------------------------------------------------------------- 1 | const calculateChange = function(amount) { 2 | let quarters = Math.floor(amount / 25) 3 | amount = amount % 25 4 | 5 | let dimes = Math.floor(amount / 10) 6 | amount = amount % 10 7 | 8 | let nickles = Math.floor(amount / 5) 9 | amount = amount % 5 10 | let pennies = Math.floor(amount / 1) 11 | return `${quarters} quarters, ${dimes} dimes, ${nickles} nickles, and ${pennies} pennies.` 12 | } 13 | 14 | console.log(calculateChange(99)) -------------------------------------------------------------------------------- /Event Countdown Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Countdown Timer 9 | 10 | 11 |

Time Until

12 |

13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /Digital Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Your Local Time 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Digital Clock/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: lightblue; 3 | margin: 200px auto; 4 | text-align: center; 5 | 6 | } 7 | 8 | #banner{ 9 | font-size: 100px; 10 | text-transform: uppercase; 11 | background-color: rgb(224, 106, 106); 12 | color: white; 13 | height: 200px; 14 | width: 80%; 15 | margin: 0 auto; 16 | } 17 | #clock{ 18 | background-color: black; 19 | font-size: 250px; 20 | color:white; 21 | height: 400px; 22 | width: 80%; 23 | margin: 0 auto; 24 | } -------------------------------------------------------------------------------- /Color Changing App/app.js: -------------------------------------------------------------------------------- 1 | //Select 7 colors 2 | let colors = [ 'red', 'blue', 'green', 'orange', 'purple', 'black', 'yellow']; 3 | 4 | 5 | 6 | //change the background of canvas when button is clicked 7 | let button = document.getElementById('button'); 8 | 9 | button.addEventListener('click', function(){ 10 | //select a random number between 0 - 6 11 | let index = parseInt((Math.random()*colors.length)+1); 12 | //grab the canvas 13 | let canvas = document.getElementById('canvas'); 14 | 15 | canvas.style.background = `${colors[index]}` 16 | }) -------------------------------------------------------------------------------- /2D Canvas Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 2D Brick Breaker 9 | 10 | 11 | 12 | I'm sorry your browser version does not support canvas 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Background Color Switcher/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | margin: 0; 3 | } 4 | 5 | span { 6 | display: block; 7 | } 8 | .canvas { 9 | margin: 100px auto 100px; 10 | width: 80%; 11 | text-align: center; 12 | } 13 | 14 | .button { 15 | width: 100px; 16 | height: 100px; 17 | border: solid black 2px; 18 | display: inline-block; 19 | border-radius: 50%; 20 | } 21 | 22 | #grey{ 23 | background: grey; 24 | } 25 | 26 | #white{ 27 | background: white; 28 | } 29 | #blue{ 30 | background: blue; 31 | } 32 | #yellow{ 33 | background: yellow; 34 | } -------------------------------------------------------------------------------- /Lightbulb Effect Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Light Switching 9 | 10 | 11 |
12 |

Turn the light on and off
by clicking the bulb!

13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Word Count Tool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Word Length Calcuator 9 | 10 | 11 |

Type a word in the box

12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Todo List 9 | 10 | 11 |
12 |

Todo List

13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Greeting Message Project/app.js: -------------------------------------------------------------------------------- 1 | var name = prompt('Enter Your Name, Please.', 'JSBeginner'); 2 | var today = new Date(); 3 | var hrs = today.getHours(); 4 | document.writeln(''); 5 | document.writeln(''); 6 | if (hrs <= 12){ 7 | document.write('Good Morning, '+name+'!'); 8 | } else if (hrs <= 18){ 9 | document.write('Good Afternoon, '+name+'!'); 10 | } else { 11 | document.write('Good Evening, '+name+'!'); 12 | } 13 | document.write('
') 14 | 15 | 16 | 17 | //prompt('text', default text') 18 | //Document.writeln(); 19 | //https://www.w3schools.com/jsref/met_doc_write.asp -------------------------------------------------------------------------------- /Color Changing App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Color Changing App 9 | 10 | 11 |
12 | My background color will change when my button below is clicked. 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Day of the Week App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Day of the Week 9 | 10 | 11 |
12 |

Today is:

13 |
14 | 15 | Display day of the week. 16 |
17 | Display a quote 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Quote of Day Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Quotes App 9 | 10 | 11 |
12 |

Quote of the Day

13 |

Press the button below to recieve a random quote!

14 | 15 | 16 |

17 |

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Mortgage Loan Calculator/loancalculator.js: -------------------------------------------------------------------------------- 1 | function computeLoan(){ 2 | const amount = document.querySelector('#amount').value; 3 | const interest_rate = document.querySelector('#interest_rate').value; 4 | const months = document.querySelector('#months').value; 5 | const interest = (amount * (interest_rate * 0.01)) / months; 6 | let payment = ((amount / months) + interest).toFixed(2); //calculate monthly payment 7 | 8 | //regedit to add a comma after every three digits 9 | payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //\B looks for a word boundary, ? says what to look for, \d looks for 3 digits in a row 10 | document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}` 11 | 12 | } -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/Todo List Project - My Solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Todo List 9 | 10 | 11 |
12 |

Todo List

13 | 14 |
    15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Background Color Switcher/app.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll('.button'); 2 | const body = document.querySelector('body'); 3 | 4 | console.log(buttons); 5 | 6 | buttons.forEach(function(button){ 7 | button.addEventListener('click', function(e){ 8 | console.log(e.target); 9 | if (e.target.id === 'grey'){ 10 | body.style.backgroundColor = e.target.id; 11 | } 12 | if (e.target.id === 'white'){ 13 | body.style.backgroundColor = e.target.id; 14 | } 15 | if (e.target.id === 'blue'){ 16 | body.style.backgroundColor = e.target.id; 17 | } 18 | if (e.target.id === 'yellow'){ 19 | body.style.backgroundColor = e.target.id; 20 | } 21 | }) 22 | }) -------------------------------------------------------------------------------- /Word Count Tool/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color:#FA8072; 3 | text-align: center; 4 | } 5 | 6 | input{ 7 | margin: 100px auto 100px; 8 | /* margin-left: 220px; */ 9 | width: 350px; 10 | height: 40px; 11 | display: block; 12 | text-align: center; 13 | } 14 | 15 | #output{ 16 | margin-top: 45px; 17 | width: 100px; 18 | background: lightgreen; 19 | margin: 100px auto 100px; 20 | 21 | } 22 | 23 | #btn{ 24 | width: 350px; 25 | height: 80px; 26 | color: #fff; 27 | background-color:blue; 28 | border-style: none; 29 | border-radius: 15px; 30 | margin-top: 100px; 31 | /* margin-left: 385px; */ 32 | } 33 | 34 | h1{ 35 | 36 | color: #000; 37 | margin-top: 50px; 38 | } -------------------------------------------------------------------------------- /Weight Conversion Tool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weight Converstion Tool 9 | 10 | 11 |
12 |
13 |

Weight Converter (pounds to kg)

14 |

Enter weight value in pounds:

15 | 16 | 17 |

Your weight in Kilograms is:

18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Color Changing App/style.css: -------------------------------------------------------------------------------- 1 | #canvas{ 2 | background-color: red; 3 | color: white; 4 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 5 | font-size: 25px; 6 | width: 600px; 7 | height: 500px; 8 | margin: 50px auto 50px; 9 | text-align: center; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | #button{ 16 | text-align: center; 17 | width: 200px; 18 | height: 50px; 19 | margin: 50px auto 50px; 20 | color: white; 21 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 22 | background: black; 23 | border-radius: 5px; 24 | border-style: none; 25 | display: block; 26 | } 27 | -------------------------------------------------------------------------------- /Math Addition App Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |
7
13 |
+
14 |
10
15 |
=
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Background Color Switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Background Color Switcher 9 | 10 | 11 |
12 |

Color Scheme Switcher

13 | 14 | 15 | 16 | 17 |

Try clicking on one of the colors above to change the background color of this page!

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript Image Slider/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | text-align: center; 3 | } 4 | 5 | #canvas { 6 | position: relative; 7 | height: 600px; 8 | width: 900px; 9 | border: 2px solid black; 10 | margin: auto; 11 | box-sizing: border-box; 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | } 16 | 17 | .arrow{ 18 | position: relative; 19 | z-index: 1; 20 | width: 50px; 21 | height: 50px; 22 | border: 2px solid green; 23 | padding: 5px; 24 | box-sizing: border-box; 25 | background: white; 26 | opacity: .8; 27 | 28 | } 29 | 30 | .image{ 31 | width: 35px; 32 | height: 35px; 33 | } 34 | 35 | .arrow:hover{ 36 | background-color: green; 37 | } 38 | 39 | footer{ 40 | margin-top: 50px; 41 | text-align: center; 42 | } 43 | -------------------------------------------------------------------------------- /Percentage Tip Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tip Calculator 9 | 10 | 11 |

Tip calculator

12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Countdown Timer/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | text-align: center; 3 | background: #fff; 4 | font-family: sans-serif, arial; 5 | font-weight: bold; 6 | } 7 | 8 | h1{ 9 | color: #396; 10 | font-weight: bold; 11 | font-size: 50px; 12 | margin: 135px 0px 20px; 13 | } 14 | 15 | #clockdiv{ 16 | font-family: sans-serif; 17 | color: #fff; 18 | display: inline-block; 19 | font-weight: 100; 20 | text-align: center; 21 | font-size: 55px; 22 | } 23 | 24 | #clockdiv > div{ 25 | padding: 50px; 26 | border-radius: 7px; 27 | background: #1F5A56; 28 | display: inline-block; 29 | } 30 | 31 | #clockdiv div > span{ 32 | padding: 65px; 33 | border-radius: 3px; 34 | background: #000; 35 | display: inline-block; 36 | } 37 | 38 | .smalltext{ 39 | padding-top: 5px; 40 | font-size: 25px; 41 | } -------------------------------------------------------------------------------- /BMI Calculator/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 375px; 3 | height: 525px; 4 | margin-left: 350px; 5 | margin-top: 65px; 6 | background-color: yellow; 7 | padding-left: 30px; 8 | } 9 | #height, #weight { 10 | width: 150px; 11 | height: 25px; 12 | margin-top: 30px; 13 | } 14 | 15 | #weight-guide{ 16 | margin-left: 75px; 17 | margin-top: 25px; 18 | } 19 | 20 | #results{ 21 | font-size: 35px; 22 | margin-left: 90px; 23 | margin-top: 20px; 24 | color: blue; 25 | } 26 | 27 | button{ 28 | width: 150px; 29 | height: 35px; 30 | margin-left: 90px; 31 | margin-top: 25px; 32 | border-radius: 5px; 33 | border-style: none; 34 | background-color: blue; 35 | color: #fff; 36 | font-size: 25px; 37 | } 38 | 39 | h1{ 40 | padding-left: 15px; 41 | padding-top: 25px; 42 | } -------------------------------------------------------------------------------- /Day of the Week App/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | margin: 50px; 4 | background: #fff; 5 | } 6 | 7 | #container{ 8 | width: 650px; 9 | height: 350px; 10 | background-color: #00ffff; 11 | margin: auto; 12 | border-radius: 30px; 13 | } 14 | 15 | h1{ 16 | font-size: 47px; 17 | font-weight: 600; 18 | color: #fff; 19 | text-transform: uppercase; 20 | margin-bottom: 20px; 21 | margin-left: 170px; 22 | background: #0000ff; 23 | padding: 10px; 24 | border-radius: 5px; 25 | display: inline-block; 26 | } 27 | 28 | #weekday{ 29 | font-size: 80px; 30 | color: #dd5800; 31 | font-weight: 800; 32 | margin-left: 170px; 33 | } 34 | 35 | #phrase{ 36 | font-size: 40px; 37 | color: #0000ff; 38 | font-weight: 800; 39 | margin-left: 170px; 40 | } -------------------------------------------------------------------------------- /Centimeters Converter/centimetersConv.js: -------------------------------------------------------------------------------- 1 | const feetToCent = (feet, inch) => { 2 | if (feet < 0){ 3 | console.log('Please enter a feet value greater than 0!') 4 | return 5 | } 6 | if (inch < 0 || inch > 12){ 7 | console.log('Please enter an inches value between 0 and 12!') 8 | return 9 | } 10 | 11 | const feetToInch = feet * 12 12 | const totalInch = feetToInch + inch 13 | const centimeters = (totalInch * 2.54).toFixed(2) 14 | let isPlural = 'es' 15 | 16 | if (inch === 1){ 17 | isPlural = '' 18 | } 19 | 20 | return `${feet} feet and ${inch} inch${isPlural} is equal to ${centimeters} centimeters` 21 | } 22 | 23 | const centimeters = feetToCent(5, 13) 24 | 25 | if (centimeters === undefined){ 26 | console.log('There was an error! Try again!') 27 | } else { 28 | console.log(centimeters) 29 | } -------------------------------------------------------------------------------- /Interactive Quiz Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Baby animal names 10 | 11 | 12 |
13 |

Choose the correct animal baby names!

14 | 15 |
16 |
    17 |
    18 |
    19 |
    Next Question
    20 |
    21 |
    22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /RSS News Feed Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | RSS News Feed 9 | 10 | 11 |
    12 |
    13 |

    RSS Feed for BBC News - World

    14 |

    15 |
    16 | 17 |
    18 |
      19 |
      20 |
      21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Balloon Popping Game/app.js: -------------------------------------------------------------------------------- 1 | let popped = 0; 2 | 3 | document.addEventListener('mouseover', function(e){ 4 | 5 | if (e.target.className === "balloon"){ 6 | 7 | e.target.style.backgroundColor = "#ededed"; 8 | e.target.textContent = "POP!"; 9 | popped++; 10 | removeEvent(e); 11 | checkAllPopped(); 12 | } 13 | }); 14 | 15 | function removeEvent(e){ 16 | e.target.removeEventListener('mouseover', function(){ 17 | 18 | }) 19 | }; 20 | 21 | function checkAllPopped(){ 22 | if (popped === 24){ 23 | console.log('all popped!'); 24 | let gallery = document.querySelector('#balloon-gallery'); 25 | let message = document.querySelector('#yay-no-balloons'); 26 | gallery.innerHTML = ''; 27 | message.style.display = 'block'; 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /Height Conversion Tool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Height Converter 9 | 10 | 11 |
      12 |

      Height Converter

      13 |
      14 |
      15 |
      16 |
      17 |
      18 |
      19 |
      20 | 21 |
      22 |
      23 |
      24 | 25 | 26 | -------------------------------------------------------------------------------- /RSS News Feed Project/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | background-color: #E42C64; 3 | } 4 | 5 | 6 | 7 | #canvas{ 8 | box-sizing: border-box; 9 | width: 600px; 10 | background-color: lightblue; 11 | margin: 50px auto; 12 | padding: 40px; 13 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 14 | } 15 | 16 | #heading{ 17 | text-align: center; 18 | } 19 | 20 | h3{ 21 | font-size: 25px; 22 | padding: 15px; 23 | 24 | } 25 | 26 | span{ 27 | color: #614AD3; 28 | } 29 | 30 | #date{ 31 | color:#E42C64; 32 | } 33 | 34 | ul { 35 | list-style: none; 36 | font-size: 16px; 37 | text-transform: capitalize; 38 | } 39 | 40 | ul a{ 41 | text-decoration: none; 42 | color: #614AD3; 43 | font-weight: 800; 44 | font-size: 1.2em; 45 | } 46 | 47 | ul a:hover{ 48 | color:#E42C64; 49 | } -------------------------------------------------------------------------------- /Mortgage Loan Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mortgage Loan Calculator 9 | 10 | 11 |
      12 |

      Loan Calculator

      13 |

      Loan Amount: $

      14 |

      Interest Rate: %

      15 |

      Months to Pay:

      16 |

      17 |
      18 | 19 | 20 | -------------------------------------------------------------------------------- /RSS News Feed Project/app.js: -------------------------------------------------------------------------------- 1 | let url = 'http://feeds.bbci.co.uk/news/technology/rss.xml'; 2 | const textarea = document.querySelector('#feed-textarea > ul'); 3 | 4 | const date = new Date(); 5 | document.querySelector('#date').innerHTML = date.toDateString(); 6 | 7 | feednami.load(url) 8 | .then(feed => { 9 | textarea.value = '' 10 | console.log(feed); 11 | for(let entry of feed.entries){ 12 | //create a list element 13 | let li = document.createElement('li'); 14 | //add HTML content to list items 15 | li.innerHTML = `

      ${entry.title}

      `; 16 | //append HTML content to list 17 | textarea.appendChild(li); 18 | } 19 | }); 20 | 21 | 22 | //Using feednami to fetch RSS feeds 23 | //https://toolkit.sekando.com/docs/en/feednami 24 | 25 | //Feeds from BBC News 26 | //https://www.bbc.com/news/10628494#userss 27 | 28 | -------------------------------------------------------------------------------- /BMI Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | BMI Calculator 9 | 10 | 11 |
      12 |

      BMI Calculator

      13 |
      14 |

      15 |

      16 | 17 |
      18 |
      19 |

      BMI Weight Guide

      20 |

      Under Weight = Less than 18.6

      21 |

      Normal Range = 18.6 and 24.9

      22 |

      Overweight = Greater than 24.9

      23 |
      24 |
      25 |
      26 | 27 | 28 | -------------------------------------------------------------------------------- /Percentage Tip Calculator/style.css: -------------------------------------------------------------------------------- 1 | 2 | h1 { 3 | color: darkcyan; 4 | font-size: 50px; 5 | text-align:center; 6 | 7 | } 8 | 9 | span#tip-word { 10 | color:palevioletred; 11 | } 12 | 13 | div#calculator{ 14 | color: white; 15 | font-size: 35px; 16 | width: 600px; 17 | background-color: rgb(48, 48, 168); 18 | border-radius: 25px; 19 | padding: 50px; 20 | margin: auto; 21 | } 22 | label{ 23 | display:inline-block; 24 | width: 300px; 25 | margin-right: 25px; 26 | padding: 15px; 27 | } 28 | 29 | input{ 30 | margin-right: 50px; 31 | width: 100px; 32 | height: 25px; 33 | padding: 2.5px 40px; 34 | text-align: center; 35 | } 36 | 37 | #calculate{ 38 | background-color: rgb(236, 46, 46); 39 | color: white; 40 | border: none; 41 | border-radius: 15px; 42 | width: 150px; 43 | height: 35px; 44 | font-size: 25px; 45 | margin: 25px 200px 15px 200px; 46 | } -------------------------------------------------------------------------------- /Math Addition App Project/app.js: -------------------------------------------------------------------------------- 1 | //generate random numbers 2 | let firstNumber = parseInt(Math.random()*10); 3 | let secondNumber = parseInt(Math.random()*10); 4 | 5 | //get the total 6 | let total = firstNumber + secondNumber; 7 | 8 | //display numbers on the canvas 9 | let primary = document.getElementById('primary-number'); 10 | primary.innerHTML = `

      ${firstNumber}

      `; 11 | 12 | let secondary = document.getElementById('secondary-number'); 13 | secondary.innerHTML = `

      ${secondNumber}

      ` 14 | 15 | 16 | //get guess from user 17 | let button = document.getElementById('btn') 18 | 19 | button.addEventListener('click', function(){ 20 | 21 | let guess = document.getElementById('guess').value; 22 | guess = Number(guess); 23 | //check answer 24 | if (guess === total){ 25 | alert('Correct'); 26 | window.location.reload() 27 | } else { 28 | alert('Sorry. Incorrect. The correct answer was ' + total + '.') 29 | window.location.reload() 30 | 31 | } 32 | }); -------------------------------------------------------------------------------- /Percentage Tip Calculator/app.js: -------------------------------------------------------------------------------- 1 | let billAmount = document.getElementById('bill-amount'); 2 | let percentTip = document.getElementById('percentage-tip'); 3 | let tipAmount = document.getElementById('tip-amount'); 4 | let total = document.getElementById('total'); 5 | let calculate = document.getElementById('calculate'); 6 | 7 | calculate.addEventListener('click', function(){ 8 | billAmount = Number(billAmount.value); 9 | percentTip = Number(percentTip.value); 10 | 11 | if (isNaN(billAmount) || billAmount <= 0 || billAmount === null){ 12 | alert('Please enter a valid Bill Amount') 13 | } 14 | else if (isNaN(percentTip) || percentTip <= 0 || percentTip === null){ 15 | alert('Please enter a valid Tip Percentage') 16 | } 17 | else { 18 | let calculatedTip = percentTip/100*billAmount; 19 | tipAmount.value = '$' + calculatedTip; 20 | 21 | let calculatedTotal = billAmount + calculatedTip; 22 | total.value = '$' + calculatedTotal; 23 | } 24 | 25 | 26 | }) -------------------------------------------------------------------------------- /JavaScript Image Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Image Slider 9 | 10 | 11 |

      Image Slider

      12 |
      13 |
      14 |
      15 |
      16 | 17 | 18 | 25 | -------------------------------------------------------------------------------- /BMI Calculator/script.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | 3 | form.addEventListener('submit', function(e){ 4 | e.preventDefault(); 5 | 6 | const height = parseInt(document.querySelector('#height').value); 7 | const weight = parseInt(document.querySelector('#weight').value); 8 | const results = document.querySelector('#results'); 9 | 10 | if((height === '') || (height < 0) || (isNaN(height))){ 11 | //NaN !== NaN 12 | results.innerHTML = "Please provide a valid height"; 13 | 14 | } else if (weight === '' || weight < 0 || isNaN(weight)){ 15 | results.innerHTML = "Please provide a valid weight"; 16 | } else { 17 | //calculate BMI 18 | const bmi = (weight / ((height*height)/10000)).toFixed(2); 19 | //display the results 20 | results.innerHTML = `${bmi}` 21 | } 22 | 23 | 24 | }); 25 | 26 | //notes 27 | //NaN !== NaN, use the isNaN() function 28 | //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN 29 | 30 | -------------------------------------------------------------------------------- /JavaScript Image Slider/app.js: -------------------------------------------------------------------------------- 1 | // create an array of image sources; 2 | let images = [ 3 | 'image1.png', 'image2.png', 'image3.png','image4.png' 4 | ] 5 | let i = 0; 6 | 7 | //add initial image to canvas 8 | let canvas = document.getElementById('canvas'); 9 | canvas.style.background = `url(./images/${images[0]})` 10 | 11 | //add eventListeners to arrows 12 | let arrows = document.querySelectorAll('.arrow'); 13 | 14 | arrows.forEach(function(arrow){ 15 | arrow.addEventListener('click', function(e){ 16 | if (e.target.id === "left"){ 17 | //check to see if at beginning of array 18 | i--; 19 | if (i < 0){ 20 | i = images.length -1; 21 | } 22 | canvas.style.background = `url(./images/${images[i]})`; 23 | } else if (e.target.id === "right") { 24 | i++; 25 | if (i >= images.length ){ 26 | i = 0; 27 | } 28 | canvas.style.background = `url(./images/${images[i]})`; 29 | } 30 | }) 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /Background Image Slider Project/js/app.js: -------------------------------------------------------------------------------- 1 | // immediate invoked function expression 2 | 3 | (function() { 4 | const pictures = [ 5 | "contBcg-0", 6 | "contBcg-1", 7 | "contBcg-2", 8 | "contBcg-3", 9 | "contBcg-4" 10 | ]; 11 | 12 | //select both left and right button. Add event listeners 13 | const buttons = document.querySelectorAll('.btn') 14 | const imageDIV = document.querySelector('.img-container') 15 | let counter = 0 16 | 17 | buttons.forEach(function(button){ 18 | button.addEventListener('click', function(e){ 19 | if (button.classList.contains('btn-left')){ 20 | counter-- 21 | if(counter < 0){ 22 | counter = pictures.length -1 23 | } 24 | imageDIV.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')` 25 | } 26 | if (button.classList.contains('btn-right')){ 27 | counter++ 28 | if(counter > pictures.length -1){ 29 | counter = 0 30 | } 31 | imageDIV.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')` 32 | } 33 | }) 34 | }) 35 | })(); 36 | -------------------------------------------------------------------------------- /Contact Form Project/app.js: -------------------------------------------------------------------------------- 1 | let sendButton = document.getElementById('send'); 2 | let resetButton = document.getElementById('reset'); 3 | let form = document.getElementById('form'); 4 | 5 | 6 | form.addEventListener('submit', function(e){ 7 | e.preventDefault(); 8 | }) 9 | 10 | resetButton.addEventListener('click', function(){ 11 | let name = document.getElementById('name'); 12 | let email = document.getElementById('email'); 13 | let message = document.getElementById('message'); 14 | 15 | name.value = ''; 16 | email.value = ''; 17 | message.value = ''; 18 | }) 19 | 20 | sendButton.addEventListener('click', function(e){ 21 | let name = document.getElementById('name'); 22 | let email = document.getElementById('email'); 23 | let message = document.getElementById('message'); 24 | 25 | name = name.value; 26 | localStorage.setItem('name', name); 27 | 28 | email = email.value; 29 | localStorage.setItem('email', email); 30 | 31 | message = message.value; 32 | localStorage.setItem('message', message); 33 | 34 | }) -------------------------------------------------------------------------------- /Countdown Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Countdown Clock 10 | 11 | 12 |

      Countdown Clock

      13 |
      14 |
      15 | 16 |
      Days
      17 |
      18 |
      19 | 20 |
      Hours
      21 |
      22 |
      23 | 24 |
      Minutes
      25 |
      26 |
      27 | 28 |
      Seconds
      29 |
      30 |
      31 | 32 | 33 | -------------------------------------------------------------------------------- /Height Conversion Tool/app.js: -------------------------------------------------------------------------------- 1 | 2 | const form = document.querySelector('form'); 3 | 4 | form.addEventListener('submit', function(e){ 5 | //grab content from feet input 6 | let feet = document.querySelector('#feet'); 7 | let inches = document.querySelector('#inches'); 8 | const results = document.querySelector('#results'); 9 | e.preventDefault(); 10 | 11 | feet = parseInt(feet.value); 12 | inches = parseInt(inches.value); 13 | 14 | if (isNaN(feet) || isNaN(inches)){ 15 | results.textContent = "Please enter a valid number!"; 16 | } else if (feet < 0 ) { 17 | results.textContent = "Please enter a feet value > 0"; 18 | } else if (inches < 0 || inches >= 12) { 19 | results.textContent = "Please enter an inch value between 0 and 12"; 20 | } else { 21 | //make conversion to centimers 22 | //cm = inches * 2.54 23 | let totalInches = (feet*12) + inches; 24 | results.textContent = `${totalInches} cm`; 25 | document.querySelector('#feet').value = ''; 26 | document.querySelector('#inches').value = ''; 27 | } 28 | }) -------------------------------------------------------------------------------- /Event Countdown Timer/app.js: -------------------------------------------------------------------------------- 1 | //Set date to countdown to: 2 | let countDownFromDate = new Date('Feb 1, 2020 12:00:00').toDateString(); 3 | let countDownDate = new Date('Feb 1, 2020 12:00:00').getTime(); 4 | let x = setInterval(function(){ 5 | let now = new Date().getTime(); 6 | //get distance between current date to countdown date 7 | let distance = countDownDate - now; 8 | //get days, hours, minutes, and seconds 9 | let days = Math.floor(distance / (1000 * 60 *60 * 24)); 10 | let hours = Math.floor((distance % (1000 * 60 *60*24)) / (1000 * 60 * 60)); 11 | let minutes = Math.floor((distance % (1000 * 60 * 60))/ (1000 * 60)); 12 | let seconds = Math.floor((distance % (1000 * 60)) / 1000); 13 | //output countdown from date 14 | document.getElementById('countdown-from').innerHTML = `${countDownFromDate}` 15 | //output timer to HTML 16 | document.getElementById('root').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; 17 | 18 | //stop countdown timer when date is reached 19 | if (distance < 0){ 20 | clearInterval(x); 21 | document.getElementById('root').innerHTML = 'Timer Expired'; 22 | } 23 | 24 | }, 1000); 25 | -------------------------------------------------------------------------------- /Weight Conversion Tool/app.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | 3 | 4 | //add an event listener to the form 5 | 6 | form.addEventListener('submit', function(e){ 7 | e.preventDefault(); 8 | const input = document.querySelector('input'); 9 | let results = document.querySelector('span'); 10 | let poundsToKG; 11 | 12 | if ((input.value <= 0) || (isNaN(input.value))){ 13 | results.classList.add('error'); 14 | results.innerHTML = "

      Please enter a value number!

      " 15 | setTimeout(function(){ 16 | results.innerHTML = ''; 17 | 18 | results.classList.remove('error'); 19 | }, 2000) 20 | input.value = ''; 21 | } else { 22 | poundsToKG = Number(input.value) / 2.2; 23 | results.classList.add('no-error'); 24 | results.innerHTML = `${poundsToKG.toFixed(2)}`; 25 | setTimeout(function(){ 26 | results.innerHTML = ''; 27 | input.value = ''; 28 | results.classList.remove('no-error'); 29 | }, 10000) 30 | 31 | } 32 | 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /Contact Form Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Contact Form 9 | 10 | 11 |
      12 |

      Please Contact me

      13 |
      14 |
      15 | 16 |
      17 |
      18 |
      19 | 20 |
      21 |
      22 |
      23 | 24 |
      25 |
      26 |
      27 | 28 |
      29 |
      30 | 31 |
      32 |
      33 |
      34 | 35 | 36 | -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | text-align: center; 3 | background-color: #6495ed; 4 | color: white; 5 | font-family: helvetica; 6 | } 7 | 8 | #add{ 9 | background-color:red; 10 | border:0; 11 | color:white; 12 | padding: 10px 10px; 13 | padding-right: 40px; 14 | cursor: pointer; 15 | margin-top: 35px; 16 | } 17 | 18 | .remove{ 19 | margin-top:13px; 20 | background-color: #f2f205; 21 | float:right; 22 | clear: both; 23 | padding-right: 20px; 24 | border-radius:5px; 25 | width: 60px; 26 | height: 20px; 27 | border-style: none; 28 | } 29 | 30 | #wrapper{ 31 | width: 450px; 32 | background-color: #000365; 33 | margin: 120px auto; 34 | padding-bottom: 30px; 35 | padding-left: 50px; 36 | padding-top: 30px; 37 | padding-right: 65px; 38 | border-radius: 25px; 39 | } 40 | 41 | ul{ 42 | list-style: none; 43 | text-align: left; 44 | line-height: 35px; 45 | } 46 | 47 | #task{ 48 | width: 320px; 49 | height: 30px; 50 | margin-left: 17px; 51 | } 52 | 53 | h1{ 54 | margin-top:30px; 55 | } -------------------------------------------------------------------------------- /Math Addition App Project/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: lightskyblue; 3 | } 4 | 5 | #canvas{ 6 | box-sizing:border-box; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | background: yellow; 11 | width: 700px; 12 | height: 300px; 13 | margin: 50px auto; 14 | } 15 | 16 | #primary-number, #secondary-number{ 17 | display:flex; 18 | align-items:center; 19 | justify-content: center; 20 | font-size: 40px; 21 | font-weight: bold; 22 | width: 125px; 23 | height: 125px; 24 | box-sizing: border-box; 25 | } 26 | 27 | #primary-number{ 28 | border: solid 4px green; 29 | } 30 | 31 | #secondary-number{ 32 | border: solid 4px blue; 33 | } 34 | 35 | #add, #equal{ 36 | font-weight: bold; 37 | font-size: 40px; 38 | padding: 5px; 39 | } 40 | input{ 41 | border: solid 2px cyan; 42 | width: 150px; 43 | height: 30px; 44 | padding-left: 25px; 45 | } 46 | 47 | button{ 48 | width: 100px; 49 | height: 35px; 50 | margin: 5px; 51 | background: red; 52 | color: white; 53 | border: 1px solid lightgrey; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /Quote of Day Project/quotes.js: -------------------------------------------------------------------------------- 1 | //Use an array to hold the value of the quotes 2 | const arrayOfQuotes = [ 3 | {'author': 'Jim Rohn', 4 | 'quote': 'Beware of what you become in pursuit of what you want.' 5 | }, 6 | {'author': 'Epictetus', 7 | 'quote': 'It\'s not what happens to you, but how you react to it that matters.' 8 | }, 9 | {'author': 'Frank Sinatra', 10 | 'quote': 'The best revenge is massive success.' 11 | }, 12 | {'author': 'Wayne Gretzy', 13 | 'quote': 'You miss 100% of the shots you don\'t take.' 14 | }, 15 | {'author': 'Nelson Mandela', 16 | 'quote': 'Resentment is like drinking poison and waiting for your enemies to die.' 17 | }, 18 | {'author': 'Elbert Hubbard', 19 | 'quote': 'Do not take life too seriously. You will not get out alive.' 20 | }, 21 | ]; 22 | 23 | function generateQuote(){ 24 | const random = Number.parseInt(Math.random()*arrayOfQuotes.length + 1); 25 | document.querySelector('#quoteOutput').textContent = `\"${arrayOfQuotes[random].quote}\"`; 26 | document.querySelector('#authorOutput').textContent = `--${arrayOfQuotes[random].author}`; 27 | 28 | } 29 | -------------------------------------------------------------------------------- /Number Guessing Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Number Guessing Game 8 | 9 | 10 | 11 |

      Number guessing game

      12 |

      Try and guess a random number between 1 and 100.

      13 |

      You have 10 attempts to guess the right number.

      14 |
      15 |
      16 |
      17 | Guess a number 18 | 19 | 20 | 21 | 22 |
      23 |

      Previous Guesses:

      24 |

      Guesses Remaining: 10

      25 |

      26 |
      27 |
      28 | 29 | 30 | -------------------------------------------------------------------------------- /Height Conversion Tool/style.css: -------------------------------------------------------------------------------- 1 | form{ 2 | margin: 50px auto; 3 | width: 500px; 4 | height: 600px; 5 | background-color: black; 6 | } 7 | 8 | label { 9 | width: 150px; 10 | color: white; 11 | margin: 25px 50px 25px 0px; 12 | font-size: 1.5em; 13 | 14 | } 15 | 16 | input#feet{ 17 | height: 40px; 18 | width: 200px; 19 | padding-left: 25px; 20 | margin-left: 20px; 21 | font-size: 1.5em; 22 | 23 | } 24 | 25 | input#inches{ 26 | height: 40px; 27 | width: 200px; 28 | padding-left: 25px; 29 | font-size: 1.5em; 30 | 31 | } 32 | 33 | h1{ 34 | text-align: center; 35 | color: white; 36 | padding-top: 50px; 37 | } 38 | 39 | .row{ 40 | width: 400px; 41 | text-align: left; 42 | margin: 25px auto; 43 | } 44 | 45 | #button{ 46 | background-color: red; 47 | border: none; 48 | color: white; 49 | width: 175px; 50 | padding: 5px 15px; 51 | line-height: 1.2em; 52 | font-size: 1.2em; 53 | text-align: center; 54 | margin: 50px 120px; 55 | } 56 | 57 | #results{ 58 | color: yellow; 59 | font-size: 2.5em; 60 | text-align: center; 61 | } -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/Todo List Project - My Solution/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: lightblue; 3 | } 4 | 5 | form{ 6 | background-color: darkblue; 7 | width: 50%; 8 | color: white; 9 | margin: 50px auto; 10 | padding: 50px; 11 | box-sizing: border-box; 12 | } 13 | 14 | form h1{ 15 | text-align: center; 16 | } 17 | 18 | form input#todo-input{ 19 | box-sizing: border-box; 20 | width: 75%; 21 | height: 25px; 22 | padding-left: 25px; 23 | } 24 | 25 | #add-item{ 26 | height: 25px; 27 | width: 25%; 28 | background-color: red; 29 | color: white; 30 | border-style: none; 31 | } 32 | 33 | ul { 34 | list-style: none; 35 | list-style-position: outside; 36 | margin: 0; 37 | padding: 25px 0; 38 | } 39 | li{ 40 | display: flex; 41 | justify-content: space-between; 42 | padding-bottom: 10px; 43 | } 44 | 45 | .delete-item{ 46 | background-color: yellow; 47 | border-radius: 5px; 48 | border:none; 49 | color: black; 50 | width: 50px; 51 | text-align: center; 52 | } 53 | 54 | .delete-item:hover{ 55 | background-color: orange; 56 | width: 55px; 57 | } -------------------------------------------------------------------------------- /Wake a Mole/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Whack a Mole! 10 | 11 | 12 | 13 |

      Whack-a-mole!

      0 14 | 15 | 16 |
      17 |
      18 |
      19 |
      20 | 21 |
      22 |
      23 |
      24 | 25 |
      26 |
      27 |
      28 | 29 |
      30 |
      31 |
      32 | 33 |
      34 |
      35 |
      36 | 37 |
      38 |
      39 |
      40 | 41 |
      42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Background Image Slider Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Background Image Project 18 | 20 | 21 | 22 | 23 | 24 | 25 |
      26 |
      27 |
      28 | 29 | 30 |
      31 |
      32 |
      33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Day of the Week App/app.js: -------------------------------------------------------------------------------- 1 | //Grab day of the week from local computer 2 | let date = new Date(); 3 | let dayOfWeekNumber = date.getDay(); 4 | let nameOfDay; 5 | let quote; 6 | 7 | switch(dayOfWeekNumber){ 8 | case 0: 9 | nameOfDay = 'Sunday'; 10 | quote = 'Time to chillax!'; 11 | break; 12 | case 1: 13 | nameOfDay = 'Monday'; 14 | quote = 'Monday morning blues!'; 15 | break; 16 | case 2: 17 | nameOfDay = 'Tuesday'; 18 | quote = 'Taco Time!'; 19 | break; 20 | case 3: 21 | nameOfDay = 'Wednesday'; 22 | quote = 'Two more days to the weekend.'; 23 | break; 24 | case 4: 25 | nameOfDay = 'Thursday'; 26 | quote = 'The weekend is almost here...'; 27 | break; 28 | case 5: 29 | nameOfDay = 'Friday'; 30 | quote = 'Weekend is here!'; 31 | break; 32 | case 6: 33 | nameOfDay = 'Saturday'; 34 | quote = 'Time to party!'; 35 | break; 36 | 37 | } 38 | //Display the day of the week 39 | let weekdayDiv = document.getElementById('weekday'); 40 | weekdayDiv.innerHTML = `${nameOfDay}`; 41 | 42 | //Display quote 43 | let quoteDiv = document.getElementById('phrase'); 44 | quoteDiv.innerHTML = `${quote}` 45 | 46 | 47 | -------------------------------------------------------------------------------- /Contact Form Project/style.css: -------------------------------------------------------------------------------- 1 | form{ 2 | background-color: black; 3 | width: 500px; 4 | border-radius: 25px; 5 | height: 400px; 6 | padding: 25px; 7 | font-family: Arial, Helvetica, sans-serif; 8 | box-sizing: border-box; 9 | margin: 50px auto 50px; 10 | 11 | } 12 | 13 | form h1{ 14 | color: white; 15 | text-align: center; 16 | font-size: 22px; 17 | } 18 | 19 | label{ 20 | color: rgb(43, 134, 209); 21 | font-weight: bold; 22 | padding-bottom: 5px; 23 | padding-top: 15px; 24 | display: inline-block; 25 | } 26 | 27 | input,textarea{ 28 | box-sizing: border-box; 29 | width: 450px; 30 | height: 30px; 31 | padding-left: 5px; 32 | font-family: Arial, Helvetica, sans-serif; 33 | } 34 | 35 | textarea{ 36 | height: 50px; 37 | } 38 | 39 | #buttons-row{ 40 | display: flex; 41 | justify-content: space-evenly; 42 | } 43 | 44 | button{ 45 | flex-grow: 1; 46 | width: 125px; 47 | margin: 25px; 48 | border:none; 49 | border-radius: 15px; 50 | height: 35px; 51 | font-size: 20px; 52 | } 53 | 54 | button#send{ 55 | background-color: rgb(211, 59, 59); 56 | color: white; 57 | } 58 | 59 | button#reset{ 60 | background-color: rgb(253, 253, 54); 61 | color: black; 62 | } -------------------------------------------------------------------------------- /Change_Color_Background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
      20 |
      21 |
      22 | 23 |
      24 | 25 |
      26 | 27 |
      28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Background Image Slider Project/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainWhite: #f2fdff; 3 | --mainBlue: #3e92cc; 4 | } 5 | .max-height { 6 | min-height: 100vh; 7 | } 8 | body { 9 | background: var(--mainWhite); 10 | } 11 | .img-container { 12 | min-height: 60vh; 13 | background: url("../img/contBcg-0.jpeg") center/cover fixed no-repeat; 14 | border: 0.5rem solid var(--mainBlue); 15 | border-radius: 0.5rem; 16 | position: relative; 17 | } 18 | @media screen and (min-width: 768px) { 19 | .img-container { 20 | min-height: 80vh; 21 | } 22 | } 23 | 24 | .btn-left { 25 | position: absolute; 26 | top: 50%; 27 | left: 0; 28 | background: var(--mainBlue); 29 | color: var(--mainWhite) !important; 30 | transform: translate(-50%, -50%); 31 | border: 0.2rem solid var(--mainBlue); 32 | font-size: 1.2rem; 33 | } 34 | .btn-left:hover { 35 | border-color: var(--mainBlue); 36 | background: var(--mainWhite); 37 | color: var(--mainBlue) !important; 38 | } 39 | .btn-right { 40 | position: absolute; 41 | top: 50%; 42 | right: 0; 43 | background: var(--mainBlue); 44 | color: var(--mainWhite) !important; 45 | font-size: 1.2rem; 46 | transform: translate(50%, -50%); 47 | border: 0.2rem solid var(--mainBlue); 48 | } 49 | .btn-right:hover { 50 | border-color: var(--mainBlue); 51 | background: var(--mainWhite); 52 | color: var(--mainBlue) !important; 53 | } 54 | -------------------------------------------------------------------------------- /Balloon Popping Game/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family:sans-serif; 3 | padding: 30px; 4 | background:#ededed; 5 | } 6 | 7 | .wrapper{ 8 | max-width: 690px; 9 | margin: 0 auto; 10 | } 11 | 12 | .blue { 13 | color:#3f7abe; 14 | } 15 | 16 | h1{ 17 | margin: auto; 18 | margin-top: 50px; 19 | margin-bottom: 50px; 20 | color: #08a3d9; 21 | text-transform: uppercase; 22 | font-size: 30px; 23 | color: #000380; 24 | } 25 | 26 | #balloon-gallery div{ 27 | background: #ff3300; 28 | height: 121px; 29 | width: 119px; 30 | text-align: center; 31 | color: #ff3300; 32 | font-size: 40px; 33 | font-family: sans-serif, arial; 34 | border-radius: 100%; 35 | margin-top: 20px; 36 | display: inline-block; 37 | /* float: left; */ 38 | margin: 2.5px 5 px 2.5px 0px; 39 | } 40 | 41 | #balloon-gallery div:nth-child(3n){ 42 | background: #ffce00; 43 | color: #ffce00; 44 | } 45 | 46 | #balloon-gallery div:nth-child(3n-1){ 47 | background:#3f7abe; 48 | color:#3f7abe; 49 | } 50 | 51 | #balloon-gallery div:nth-child(5n){ 52 | background:#8e7a8e; 53 | color:#8e7a8e; 54 | } 55 | 56 | #balloon-gallery div:nth-child(13){ 57 | background:#8e7a8e; 58 | color:#8e7a8e; 59 | } 60 | 61 | #balloon-gallery div:nth-child(10n){ 62 | background:#ff3300; 63 | color: #ff3300; 64 | } 65 | 66 | #balloon-gallery div:nth-child(4n){ 67 | clear:right; 68 | } 69 | 70 | #yay-no-balloons { 71 | display:none; 72 | color:#ff3300; 73 | font-size:100px; 74 | } -------------------------------------------------------------------------------- /Balloon Popping Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pop the Ballons 9 | 10 | 11 |
      12 |

      Pop the balloons by moving
      your mouse over them

      13 |
      Wow! All balloons popped!
      14 | 40 | 41 |
      42 | 43 | 44 | -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/app.js: -------------------------------------------------------------------------------- 1 | //retrieve data from local storage 2 | function get_todos(){ 3 | var todos = new Array; 4 | var todos_str = localStorage.getItem('todo'); 5 | if(todos_str !== null){ 6 | todos = JSON.parse(todos_str); 7 | } 8 | return todos; 9 | } 10 | 11 | function add(){ 12 | var task = document.getElementById('task').value; 13 | 14 | var todos = get_todos(); 15 | todos.push(task); 16 | localStorage.setItem('todo', JSON.stringify(todos)); 17 | 18 | show(); 19 | clearDefault(); 20 | return false; //avoids any futher action with click event 21 | } 22 | 23 | //clear the task value from input box 24 | function clearDefault(){ 25 | document.getElementById('task').value = ''; 26 | }; 27 | 28 | //remove tasks from the list 29 | function remove(){ 30 | var id = this.getAttribute('id');//refers to current DOM element 31 | var todos = get_todos(); 32 | todos.splice(id, 1); 33 | localStorage.setItem('todo', JSON.stringify(todos)); 34 | 35 | show(); 36 | 37 | return false; //avoids further action with click event 38 | } 39 | 40 | function show(){ 41 | var todos = get_todos(); 42 | 43 | var html = ''; 48 | console.log(html); 49 | document.getElementById('todos').innerHTML = html; 50 | 51 | var buttons = document.getElementsByClassName('remove'); 52 | for(var i=0; i < buttons.length; i++){ 53 | buttons[i].addEventListener('click', remove); 54 | }; 55 | } 56 | 57 | document.getElementById('add').addEventListener('click', add); 58 | 59 | show(); -------------------------------------------------------------------------------- /Wake a Mole/script.js: -------------------------------------------------------------------------------- 1 | const holes = document.querySelectorAll('.hole'); 2 | const scoreBoard = document.querySelector('.score'); 3 | const moles = document.querySelectorAll('.mole'); 4 | let lastHole; 5 | let timeUp = false; 6 | let score = 0; 7 | 8 | //create a function to make a random time for mole to pop from the hole 9 | function randomTime(min, max) { 10 | return Math.round(Math.random() * (max - min) + min); 11 | } 12 | 13 | function randomHole(holes){ 14 | const index = Math.floor(Math.random() * holes.length); 15 | const hole = holes[index]; 16 | 17 | //prevent same hole from getting the same number 18 | if (hole === lastHole){ 19 | return randomHole(holes); 20 | } 21 | lastHole = hole; 22 | return hole; 23 | } 24 | 25 | function peep() { 26 | const time = randomTime(500, 1000); //get a random time to determine how long mole should peep 27 | const hole = randomHole(holes); //get the random hole from the randomHole function 28 | hole.classList.add('up'); //add the CSS class so selected mole can "pop up" 29 | setTimeout(() => { 30 | hole.classList.remove('up'); //make the selected mole "pop down" after a random time 31 | if(!timeUp) { 32 | peep(); 33 | } 34 | }, time); 35 | } 36 | 37 | function startGame() { 38 | scoreBoard.textContent = 0; 39 | timeUp = false; 40 | score = 0; 41 | peep(); 42 | setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds 43 | } 44 | 45 | function wack(e){ 46 | if(!e.isTrusted) return; //** new thing I learned */ 47 | score++; 48 | this.parentNode.classList.remove('up'); //this refers to item clicked 49 | scoreBoard.textContent = score; 50 | } 51 | 52 | moles.forEach(mole => mole.addEventListener('click', wack)) 53 | 54 | -------------------------------------------------------------------------------- /Number Guessing Game/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | } 4 | 5 | body { 6 | width: 50%; 7 | max-width: 750px; 8 | min-width: 480px; 9 | margin: 0 auto; 10 | } 11 | 12 | .lastResult { 13 | color: white; 14 | padding: 7px; 15 | } 16 | 17 | .guesses { 18 | color: white; 19 | padding: 7px; 20 | } 21 | 22 | button { 23 | background-color: purple; 24 | color: #fff; 25 | width: 250px; 26 | height: 50px; 27 | border-radius: 25px; 28 | font-size: 30px; 29 | border-style: none; 30 | margin-top: 30px; 31 | /* margin-left: 50px; */ 32 | } 33 | 34 | #subt { 35 | background-color: yellow; 36 | color: #000; 37 | width: 350px; 38 | height: 50px; 39 | border-radius: 25px; 40 | font-size: 30px; 41 | border-style: none; 42 | margin-top: 50px; 43 | /* margin-left: 75px; */ 44 | } 45 | 46 | #guessField { 47 | color: #000; 48 | width: 550px; 49 | height: 100px; 50 | font-size: 30px; 51 | border-style: none; 52 | margin-top: 25px; 53 | font-size: 45px; 54 | /* margin-left: 50px; */ 55 | border: 5px solid #14727d; 56 | text-align: center; 57 | } 58 | 59 | #guess { 60 | font-size: 55px; 61 | /* margin-left: 90px; */ 62 | margin-top: 120px; 63 | color: #fff; 64 | } 65 | 66 | .guesses { 67 | background-color: #12aab4; 68 | } 69 | 70 | #wrapper { 71 | box-sizing: border-box; 72 | text-align: center; 73 | width: 750px; 74 | height: 550px; 75 | background-color: #12aab4; 76 | color: #fff; 77 | font-size: 25px; 78 | } 79 | 80 | h1 { 81 | background-color: #7b3056; 82 | color: #fff; 83 | text-align: center; 84 | width: 750px; 85 | } 86 | 87 | p { 88 | font-size: 20px; 89 | text-align: center; 90 | } -------------------------------------------------------------------------------- /Desktop Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript Desktop Calculator 9 | 10 | 11 |

      Basic Calculator

      12 |
      13 |
      14 |
      15 | 16 | 17 | 18 |
      19 | 20 | 21 | 22 |
      23 | 24 | 25 | 26 |
      27 | 28 | 29 | 30 |
      31 |
      32 | 33 | 34 | -------------------------------------------------------------------------------- /Interactive Quiz Project/style.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Rokkitt); 2 | 3 | h1 { 4 | font-family: 'Rokkitt', serif; 5 | text-align: center; 6 | color: #fff; 7 | font-size: 35px; 8 | } 9 | 10 | ul{ 11 | list-style: none; 12 | } 13 | 14 | li{ 15 | font-family: 'Rokkitt', serif; 16 | font-size: 2em; 17 | color: #feb135; 18 | } 19 | 20 | input[type=radio]{ 21 | border: 0px; 22 | width: 20px; 23 | height: 2em; 24 | } 25 | 26 | p{ 27 | font-family: 'Rokkitt', serif; 28 | } 29 | 30 | /* Quiz Classes */ 31 | .quizContainer { 32 | background-color: #000398; 33 | border-radius: 8px; 34 | width: 75%; 35 | margin: auto; 36 | margin-top: 190px; 37 | padding-top: 5px; 38 | position: relative; 39 | } 40 | 41 | .nextButton{ 42 | border-radius: 6px; 43 | width: 150px; 44 | height: 40px; 45 | text-align: center; 46 | background-color: #cc0000; 47 | /*clear: both;*/ 48 | color:#fff; 49 | font-family: 'Rokkitt', serif; 50 | font-weight: bold; 51 | position: relative; 52 | margin: auto; 53 | padding-top: 20px; 54 | } 55 | 56 | .question{ 57 | font-family: 'Rokkitt', serif; 58 | font-size: 2em; 59 | width: 90%; 60 | height: auto; 61 | margin: auto; 62 | border-radius: 6px; 63 | background-color: #f2f205; 64 | text-align: center; 65 | color: #27aa63; 66 | } 67 | 68 | .quizMessage{ 69 | background-color: peachpuff; 70 | border-radius: 6px; 71 | width: 30%; 72 | margin: auto; 73 | text-align: center; 74 | padding: 2px; 75 | font-family: 'Rokkitt', serif; 76 | color: red; 77 | } 78 | 79 | .choiceList { 80 | font-family: 'Courier New', Courier, monospace; 81 | color: blueviolet; 82 | } 83 | 84 | .result { 85 | width: 30%; 86 | height: auto; 87 | border-radius: 6px; 88 | background-color: linen; 89 | margin: auto; 90 | margin-bottom: 35px; 91 | text-align: center; 92 | font-family: 'Rokkitt', serif; 93 | } -------------------------------------------------------------------------------- /Desktop Calculator/app.js: -------------------------------------------------------------------------------- 1 | //display property 2 | //onclick event 3 | //eval() function 4 | //assignment operator 5 | // 6 | 7 | 8 | 9 | //The below code sucks! But, at least I tried...for like 3 hours. Please don't use. lol 10 | 11 | 12 | // const buttons = document.querySelectorAll('button'); 13 | // let primaryOperand = ''; 14 | // let secondaryOperand = ''; 15 | // let operand = ''; 16 | // let operand2 = ''; 17 | // let savedOperator = ''; 18 | // let results = ''; 19 | // let operator = ''; 20 | 21 | // getPrimaryOperand(); 22 | // console.log(results); 23 | // function calculateNumber(primaryOperand, operator, secondaryOperand){ 24 | // results = eval(primaryOperand + operator + secondaryOperand); 25 | // return results; 26 | // } 27 | 28 | // function saveOperator(operator){ 29 | // savedOperator = operator; 30 | // return savedOperator; 31 | // } 32 | 33 | // function getPrimaryOperand(){ 34 | // buttons.forEach(function(button){ 35 | // button.addEventListener('click', function(e){ 36 | 37 | // operand = e.target.textContent 38 | 39 | // if (operand !== "0" && operand !== "+" && operand !== "-" && operand !== "X" && operand !== "÷" && operand !== "=" && operand !== "C"){ 40 | // primaryOperand += e.target.textContent; 41 | // console.log(primaryOperand); 42 | // } else if (operand === "+" || operand === "-" || operand === "X" || operand === "÷" || operand === "=" || operand !== "C"){ 43 | // operator = operand; 44 | // getSecondaryOperand(operator); 45 | // } 46 | // }) 47 | // }) 48 | // } 49 | 50 | // function getSecondaryOperand(operator){ 51 | // buttons.forEach(function(button){ 52 | // button.addEventListener('click', function(e){ 53 | 54 | // operand2 = e.target.textContent 55 | 56 | // if (operand2 !== "0" && operand2 !== "+" && operand2 !== "-" && operand2 !== "X" && operand2 !== "÷" && operand2 !== "=" && operand2 !== "C"){ 57 | // secondaryOperand += e.target.textContent; 58 | // console.log(secondaryOperand); 59 | // } else if (operand === "="){ 60 | 61 | // calculateNumber(primaryOperand, operator, secondaryOperand); 62 | // } 63 | // }) 64 | // }) 65 | // } 66 | 67 | 68 | // false OR true returns true; 69 | // true is returned if any condition within an OR statement is true -------------------------------------------------------------------------------- /Countdown Timer/app.js: -------------------------------------------------------------------------------- 1 | function getTimeRemaining(endtime){ 2 | var t = Date.parse(endtime) - Date.parse(new Date()); // get total difference in seconds 3 | var seconds = Math.floor((t / 1000) % 60); // convert total seconds to number of seconds by diving total seconds by number of seconds remaining after days,hours, and minutes are account for 4 | var minutes = Math.floor((t / 1000 /60) % 60); // convert total seconds to number of minutes by diving total seconds by number of minutes remaining after days and hours are account for 5 | var hours = Math.floor((t / (1000 * 60 *60)) % 24); // convert total seconds to number of hours by diving total seconds by number of hours remaining after days are accounted for 6 | var days = Math.floor(t / (1000 * 60 * 60 * 24)); // convert total seconds to number of days by dividing total seconds by number of days in seconds 7 | debugger; 8 | return { 9 | 'total' : t, 10 | 'days' : days, 11 | 'hours' : hours, 12 | 'minutes' : minutes, 13 | 'seconds' : seconds 14 | }; 15 | } 16 | 17 | function initializeClock(id, endtime){ 18 | var clock = document.getElementById(id); //first grab #clockdiv from div 19 | var daysSpan = clock.querySelector('.days'); // grab the days span tag from the #clockdiv's div 20 | var hoursSpan = clock.querySelector('.hours'); // grab the hours span tag from the #clockdiv's div 21 | var minutesSpan = clock.querySelector('.minutes'); // grab the minutes span tag from the #clockdiv's div 22 | var secondsSpan = clock.querySelector('.seconds'); // grab the seconds span tag from the #clockdiv's div 23 | 24 | function updateClock(){ 25 | var t = getTimeRemaining(endtime); // calculate endtime date - current date and return a date object with days, hours, minutes, and seconds 26 | 27 | daysSpan.innerHTML = t.days; //display number of days 28 | hoursSpan.innerHTML = ('0' + t.hours).slice(-2); //use negative to slice from end of string. when number is 024, the 0 will be sliced, return 24. When number is 09, slice will return 09. 29 | minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 30 | secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 31 | 32 | if(t.total <=0){ 33 | clearInterval(timeinterval); 34 | } 35 | } 36 | 37 | updateClock(); 38 | var timeinterval = setInterval(updateClock, 1000); 39 | } 40 | 41 | //initialize today's date and then add days, hours, minutes, and seconds to it. 42 | //set today as new Date 43 | //add number of days (in seconds) 44 | //parse the total number of seconds 45 | //convert the total number of seconds into the new date 46 | var deadline = new Date(Date.parse(new Date()) + 7 * 24 * 60 *60 *1000); 47 | 48 | initializeClock('clockdiv', deadline); // grab needed HTML elements from the page, and add the date from which the timer begin its countdown -------------------------------------------------------------------------------- /Budget OOP Project/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainWhite: #f5f5f5f5; 3 | --mainDark: #333333; 4 | --mainGreen: #317b22; 5 | --mainRed: #b80c09; 6 | --mainBlue: #05668d; 7 | } 8 | 9 | body { 10 | background: var(--mainWhite); 11 | color: var(--mainDark); 12 | } 13 | .budget-feedback, 14 | .expense-feedback { 15 | display: none; 16 | } 17 | 18 | .budget-form { 19 | border: 0.15rem solid var(--mainGreen); 20 | padding: 1rem; 21 | border-radius: 0.25rem; 22 | } 23 | .expense-form { 24 | border: 0.15rem solid var(--mainRed); 25 | padding: 1rem; 26 | border-radius: 0.25rem; 27 | } 28 | .budget-submit { 29 | background: transparent; 30 | border: 0.1rem solid var(--mainGreen); 31 | color: var(--mainGreen); 32 | } 33 | .expense-submit { 34 | background: transparent; 35 | border: 0.1rem solid var(--mainRed); 36 | color: var(--mainRed); 37 | } 38 | .expense-submit:hover { 39 | background: var(--mainRed); 40 | color: var(--mainWhite); 41 | } 42 | .budget-submit:hover { 43 | background: var(--mainGreen); 44 | color: var(--mainDark); 45 | } 46 | 47 | .budget-input { 48 | border: 0.05rem solid var(--mainGreen) !important; 49 | } 50 | .expense-input { 51 | border: 0.05rem solid var(--mainRed) !important; 52 | } 53 | .expense-amount, 54 | .expense-title { 55 | color: var(--mainRed); 56 | } 57 | .edit-icon { 58 | color: var(--mainBlue); 59 | cursor: pointer; 60 | font-size: 1rem; 61 | text-decoration: none !important; 62 | } 63 | .delete-icon { 64 | color: var(--mainRed); 65 | cursor: pointer; 66 | font-size: 1rem; 67 | text-decoration: none !important; 68 | } 69 | .edit-icon:hover { 70 | color: var(--mainBlue); 71 | } 72 | .delete-icon:hover { 73 | color: var(--mainRed); 74 | } 75 | .showItem { 76 | display: block; 77 | } 78 | .info-title { 79 | font-size: 1.5rem; 80 | } 81 | .budget { 82 | font-size: 1.6rem; 83 | color: var(--mainGreen); 84 | } 85 | .expense { 86 | font-size: 1.6rem; 87 | color: var(--mainRed); 88 | } 89 | .balance { 90 | font-size: 1.6rem; 91 | } 92 | .budget-icon, 93 | .expense-icon, 94 | .balance-icon { 95 | font-size: 2.5rem; 96 | color: var(--mainBlue); 97 | } 98 | .showRed { 99 | color: var(--mainRed); 100 | } 101 | .showGreen { 102 | color: var(--mainGreen); 103 | } 104 | .showBlack { 105 | color: var(--mainDark); 106 | } 107 | @media screen and (min-width: 992px) { 108 | .budget { 109 | font-size: 2.6rem; 110 | color: var(--mainGreen); 111 | } 112 | .expense { 113 | font-size: 2.6rem; 114 | color: var(--mainRed); 115 | } 116 | .balance { 117 | font-size: 2.6rem; 118 | } 119 | .budget-icon, 120 | .expense-icon, 121 | .balance-icon { 122 | font-size: 3.5rem; 123 | color: var(--mainBlue); 124 | } 125 | } 126 | .list-item { 127 | flex: 0 0 33.33%; 128 | text-align: center; 129 | } 130 | .expense-item { 131 | height: 2rem; 132 | } 133 | -------------------------------------------------------------------------------- /Analogue Clock/clock.js: -------------------------------------------------------------------------------- 1 | //create a canvas object fro HTML element 2 | var canvas = document.getElementById('canvas'); 3 | //create a 2d drawing object 4 | var ctx = canvas.getContext('2d'); 5 | //calculate the clock radius by using the height 6 | var radius = canvas.height / 2; 7 | //remap the x and y axis to the center of the canvas 8 | ctx.translate(radius, radius); 9 | //reduce clock radius by 90% 10 | radius = radius * 0.90; 11 | 12 | setInterval(drawClock, 1000); //run the drawClock function every second. 13 | 14 | function drawClock(){ 15 | drawFace(ctx, radius); 16 | drawNumbers(ctx, radius); 17 | drawTime(ctx, radius); 18 | } 19 | 20 | function drawFace(ctx, radius){ 21 | var grad; 22 | //draw white circle for the face 23 | ctx.beginPath(); 24 | ctx.arc(0,0,radius,0,2*Math.PI); 25 | ctx.fillStyle = "White"; 26 | ctx.fill(); 27 | // create a radial gradient (inner, middle, and outer edge of clock) 28 | grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 29 | grad.addColorStop(0, '#333'); 30 | grad.addColorStop(0.5, 'white'); 31 | grad.addColorStop(1, '#333'); 32 | //define gradient as stroke style 33 | ctx.strokeStyle = grad; 34 | ctx.lineWidth = radius*0.1; 35 | ctx.stroke(); 36 | //draw the center of the clock 37 | ctx.beginPath(); 38 | ctx.arc(0,0, radius*0.1,0,2*Math.PI); 39 | ctx.fillStyle = '#333'; 40 | ctx.fill(); 41 | } 42 | 43 | function drawNumbers(ctx, radius) { 44 | var ang; 45 | var num; 46 | ctx.font = radius*0.15 + "px arial"; //set font at 15% of radius 47 | ctx.textBaseline = "middle"; //set text alignment to middle 48 | ctx.textAlign = "center"; //set text alignment to center 49 | for(num=1; num < 13; num++){ //calculate the print position for each number 50 | ang = num *Math.PI /6; 51 | ctx.rotate(ang); 52 | ctx.translate(0, -radius*0.85); 53 | ctx.rotate(-ang); 54 | ctx.fillText(num.toString(), 0, 0); 55 | ctx.rotate(ang); 56 | ctx.translate(0, radius*0.85); 57 | ctx.rotate(-ang); 58 | } 59 | } 60 | 61 | function drawTime(ctx, radius){ 62 | var now = new Date(); 63 | var hour = now.getHours(); 64 | var minute = now.getMinutes(); 65 | var second = now.getSeconds(); 66 | //hour 67 | hour = hour%12; 68 | //calculate angle of hour hand 69 | hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); 70 | //make hour hand 50% of canvas's radius 71 | drawHand(ctx, hour, radius*0.5, radius*0.07); 72 | //minute 73 | //calculate angle of minute hand 74 | minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 75 | //make minute hand 80% of canvas's radius 76 | drawHand(ctx, minute, radius*0.8, radius*0.07); 77 | //second 78 | //calculate angle of second hand 79 | second=(second*Math.PI/30); 80 | //make second hand 90% of canvas's radius 81 | drawHand(ctx, second, radius*0.9, radius*0.02); 82 | } 83 | 84 | function drawHand(ctx, pos, length, width){ 85 | ctx.beginPath(); 86 | ctx.lineWidth = width; 87 | ctx.lineCap = "round"; 88 | ctx.moveTo(0,0); 89 | ctx.rotate(pos); 90 | ctx.lineTo(0, -length); 91 | ctx.stroke(); 92 | ctx.rotate(-pos); 93 | } -------------------------------------------------------------------------------- /TodoList Project BlueLime Solution/Todo List Project - My Solution/app.js: -------------------------------------------------------------------------------- 1 | //grab the form and prevent default submission behavior 2 | let form = document.getElementById('form'); 3 | 4 | //items array for new items 5 | let items = []; 6 | 7 | //function call to check local storage and display items, if any. 8 | displayLocalStorage(); 9 | 10 | //submit new items to todolist 11 | form.addEventListener('submit', function(e){ 12 | e.preventDefault(); 13 | //grab input from 14 | let todoInput = document.getElementById('todo-input').value; 15 | //if input is blank do nothing 16 | if (todoInput === ""){ 17 | alert('Please enter valid input!'); 18 | } 19 | else { 20 | //display items 21 | displayItems(todoInput); 22 | //Place todoItem in localStorage 23 | storeItem(todoInput); 24 | //Clear the todo item field 25 | document.getElementById('todo-input').value = ''; 26 | //add an event listener to the delete button 27 | addDeleteFunction(todoInput); 28 | } 29 | }); 30 | 31 | //function to store items in local storage 32 | function storeItem(item){ 33 | items.push(item); 34 | localStorage.setItem('item',JSON.stringify(items)); 35 | }; 36 | 37 | //function to display items in the DOM 38 | function displayItems(todoInput){ 39 | //create a li tag for the element 40 | let todoItem = document.createElement('li'); 41 | 42 | todoItem.innerHTML = `${todoInput}
      Delete
      `; 43 | //Display the todo item 44 | let todoList = document.querySelector('ul'); 45 | todoList.appendChild(todoItem); 46 | }; 47 | 48 | function displayLocalStorage(){ 49 | let storage = localStorage.getItem('item'); 50 | 51 | if (storage === null){ 52 | items = []; 53 | } else { 54 | let storageParsed = JSON.parse(storage); 55 | storageParsed.forEach(function(storageItem){ 56 | displayItems(storageItem); 57 | }) 58 | }; 59 | }; 60 | 61 | function addDeleteFunction(todoInput){ 62 | 63 | let deleteButton = document.querySelectorAll('.delete-item'); 64 | 65 | deleteButton.forEach(function(button, index){ 66 | button.addEventListener('click', function(e){ 67 | console.log(e.path[1].childNodes); 68 | 69 | //remove index number from localStorage 70 | let deletedStorage = localStorage.getItem('item'); 71 | let deletedStorageParsed = JSON.parse(deletedStorage); 72 | 73 | deletedStorageParsed.splice(index, 1); 74 | console.log(deletedStorageParsed); 75 | localStorage.setItem('item',JSON.stringify(deletedStorageParsed)); 76 | if(deletedStorageParsed.length === 0){ 77 | let todoList = document.querySelector('ul'); 78 | todoList.innerHTML = ''; 79 | let todoItem = document.createElement('li'); 80 | todoItem.innerHTML = `No more todos!`; 81 | 82 | todoList.appendChild(todoItem); 83 | displayLocalStorage(); 84 | 85 | 86 | 87 | 88 | } else { 89 | localStorage.setItem('item',JSON.stringify(deletedStorageParsed)); 90 | } 91 | 92 | 93 | }) 94 | }) 95 | } -------------------------------------------------------------------------------- /Wake a Mole/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 35px; 3 | background: #98BCF4; 4 | } 5 | 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | text-align: center; 10 | } 11 | 12 | h1 { 13 | text-align: center; 14 | font-size: 100px; 15 | line-height: 1; 16 | margin-bottom: 0; 17 | } 18 | 19 | .score { 20 | background:blue; 21 | padding: 0 48px; 22 | line-height: 1; 23 | border-radius: 16px; 24 | color: #fff; 25 | margin-left: 15px; 26 | } 27 | 28 | .game { 29 | width: 600px; 30 | height: 400px; 31 | display:flex; 32 | flex-wrap:wrap; 33 | margin: 0 auto; 34 | 35 | } 36 | 37 | .hole{ 38 | flex: 1 0 33.33%; 39 | overflow: hidden; 40 | position: relative; 41 | } 42 | 43 | .hole:after{ 44 | display:block; 45 | background: url(dirt.png) bottom center no-repeat; 46 | background-size:contain; 47 | content: ''; 48 | width: 100%; 49 | height: 90px; 50 | position: absolute; 51 | z-index: 2; 52 | bottom: -30px; 53 | } 54 | 55 | .mole { 56 | background: url('mole.png') bottom center no-repeat; 57 | background-size: 80%; 58 | position: absolute; 59 | top: 100%; 60 | width: 100%; 61 | height: 100%; 62 | transition: all 0.4s; 63 | } 64 | 65 | .hole.up .mole{ 66 | top:0; 67 | } 68 | 69 | button{ 70 | width:175px; 71 | font-size: 35px; 72 | height: 70px; 73 | color: #fff; 74 | background-color: blue; 75 | border-radius: 10px; 76 | margin-left: 20px; 77 | margin-top: 90px; 78 | } 79 | 80 | @media (min-width: 667px) and (max-width: 1024px){ 81 | 82 | h1 { 83 | display: none; 84 | } 85 | .score { 86 | background:blue; 87 | padding: 0 12px; 88 | line-height: 1; 89 | border-radius: 16px; 90 | color: #fff; 91 | font-size: 40px; 92 | margin-left: 20px; 93 | } 94 | 95 | .hole.up .mole{ 96 | top:17px; 97 | } 98 | } 99 | 100 | @media (max-width: 667px){ 101 | 102 | .game { 103 | width: 667px; 104 | height: 300px; 105 | display:flex; 106 | flex-wrap:wrap; 107 | margin: 0 auto; 108 | } 109 | 110 | .score{ 111 | width:35px; 112 | font-size: 15px; 113 | height: 40px; 114 | color: #fff; 115 | background-color: blue; 116 | border-radius: 10px; 117 | margin-left: 10px; 118 | margin-top: 10px; 119 | padding: 5px; 120 | } 121 | 122 | button{ 123 | margin: 10px 10px 10px 10px; 124 | height: 40px; 125 | width: 75px; 126 | font-size: 15px; 127 | } 128 | 129 | .hole:after{ 130 | display:block; 131 | background: url(dirt.png) bottom center no-repeat; 132 | background-size:contain; 133 | content: ''; 134 | max-width: 70%; 135 | height: 60px; 136 | position: absolute; 137 | z-index: 2; 138 | bottom: -30px; 139 | } 140 | 141 | .mole { 142 | background: url('mole.png') bottom center no-repeat; 143 | background-size: 60%; 144 | position: absolute; 145 | top: 100%; 146 | max-width: 70%; 147 | height: 70%; 148 | transition: all 0.4s; 149 | } 150 | 151 | .hole.up .mole{ 152 | top:50px; 153 | } 154 | } -------------------------------------------------------------------------------- /Number Guessing Game/app.js: -------------------------------------------------------------------------------- 1 | //Generate a random number between 1 and 500 2 | let randomNumber = parseInt((Math.random()*100)+1); 3 | const submit = document.querySelector('#subt'); 4 | const userInput = document.querySelector('#guessField'); 5 | const guessSlot = document.querySelector('.guesses'); 6 | const remaining = document.querySelector('.lastResult'); 7 | const startOver = document.querySelector('.resultParas'); 8 | const lowOrHi = document.querySelector('.lowOrHi'); 9 | const p = document.createElement('p'); 10 | let previousGuesses = []; 11 | let numGuesses = 1; 12 | let playGame = true; 13 | 14 | if (playGame){ 15 | subt.addEventListener('click', function(e){ 16 | e.preventDefault(); 17 | //Grab guess from user 18 | const guess = parseInt(userInput.value); 19 | validateGuess(guess); 20 | }); 21 | } 22 | 23 | function validateGuess(guess){ 24 | if (isNaN(guess)){ 25 | alert('Please enter a valid number'); 26 | } else if (guess < 1) { 27 | alert('Please enter a number greater than 1!'); 28 | } else if (guess > 100){ 29 | alert('Please enter a number less than 500!') 30 | } else { 31 | //Keep record of number of attempted guesses 32 | previousGuesses.push(guess); 33 | //Check to see if game is over 34 | if (numGuesses === 11){ 35 | displayGuesses(guess); 36 | displayMessage(`Game Over! Number was ${randomNumber}`); 37 | endGame(); 38 | } else { 39 | //Display previous guessed numbers 40 | displayGuesses(guess); 41 | //Check guess and display if wrong 42 | checkGuess(guess); 43 | } 44 | } 45 | } 46 | 47 | function checkGuess(guess){ 48 | //Display clue if guess is too high or too low 49 | if (guess === randomNumber){ 50 | displayMessage(`You guessed correctly!`); 51 | endGame(); 52 | } else if (guess < randomNumber) { 53 | displayMessage(`Too low! Try again!`); 54 | } else if (guess > randomNumber) { 55 | displayMessage(`Too High! Try again!`); 56 | } 57 | } 58 | 59 | function displayGuesses(guess){ 60 | userInput.value = ''; 61 | guessSlot.innerHTML += `${guess} `; 62 | numGuesses++ 63 | remaining.innerHTML = `${11 - numGuesses} `; 64 | } 65 | 66 | function displayMessage(message){ 67 | lowOrHi.innerHTML = `

      ${message}

      ` 68 | } 69 | 70 | function endGame(){ 71 | //Clear user input 72 | userInput.value = ''; 73 | //Disable user input button 74 | userInput.setAttribute('disabled', ''); 75 | //Display Start new Game Button 76 | p.classList.add('button'); 77 | p.innerHTML = `

      Start New Game

      ` 78 | startOver.appendChild(p); 79 | playGame = false; 80 | newGame(); 81 | } 82 | 83 | function newGame(){ 84 | const newGameButton = document.querySelector('#newGame'); 85 | newGameButton.addEventListener('click', function(){ 86 | //Pick a new random number 87 | randomNumber = parseInt((Math.random()*100)+1); 88 | previousGuesses = []; 89 | numGuesses = 1; 90 | guessSlot.innerHTML = ''; 91 | lowOrHi.innerHTML = ''; 92 | remaining.innerHTML = `${11 - numGuesses} `; 93 | userInput.removeAttribute('disabled'); 94 | startOver.removeChild(p); 95 | playGame = true; 96 | }) 97 | } 98 | //Allow to restart game with restart button 99 | //Change DIV to a form so it can accept the enter key 100 | 101 | //NOTES: 102 | //NaN != NaN -------------------------------------------------------------------------------- /Interactive Quiz Project/app.js: -------------------------------------------------------------------------------- 1 | var questions = [ 2 | { 3 | question: 'What is the baby of a moth known as?', 4 | choices: ['baby', 'infant', 'kit', 'larva'], 5 | correctAnswer: 3 6 | }, 7 | { 8 | question: 'What is the adult of a kid called?', 9 | choices: ['calf', 'doe', 'goat', 'chick'], 10 | correctAnswer: 2 11 | }, 12 | { 13 | question: 'What is the young of buffalo called?', 14 | choices: ['calf', 'baby', 'pup', 'cow'], 15 | correctAnswer: 0 16 | }, 17 | { 18 | question: 'What is a baby alligator called?', 19 | choices: ['baby', 'gator', 'hatchling', 'calf'], 20 | correctAnswer: 1 21 | }, 22 | { 23 | question: 'What is a baby goose called?', 24 | choices: ['gooser', 'gosling', 'gup', 'pup'], 25 | correctAnswer: 1 26 | } 27 | ]; 28 | 29 | var currentQuestion = 0; 30 | var correctAnswers = 0; 31 | var quizOver = false; 32 | 33 | window.addEventListener('DOMContentLoaded', function(e){ 34 | displayCurrentQuestion(); 35 | 36 | var quizMessage = document.querySelector('.quizMessage'); 37 | 38 | quizMessage.style.display = 'none'; 39 | 40 | document.querySelector('.nextButton').addEventListener('click', function(){ 41 | 42 | if(!quizOver){ 43 | var radioBtnsChecked = document.querySelector('input[type=radio]:checked'); 44 | 45 | if (radioBtnsChecked === null){ 46 | quizMessage.innerText = 'Please select an answer'; 47 | quizMessage.style.display = 'block'; 48 | } else { 49 | console.log(radioBtnsChecked.value); 50 | quizMessage.style.display = 'none'; 51 | if (parseInt(radioBtnsChecked.value) === questions[currentQuestion].correctAnswer){ 52 | correctAnswers++; 53 | } 54 | 55 | currentQuestion++; 56 | 57 | if (currentQuestion < questions.length){ 58 | displayCurrentQuestion(); 59 | } else { 60 | displayScore(); 61 | document.querySelector('.nextButton').innerText = 'Play Again?'; 62 | quizOver = true; 63 | } 64 | } 65 | } else { 66 | quizOver = false; 67 | document.querySelector('.nextButton').innerText = 'Next Question'; 68 | resetQuiz(); 69 | displayCurrentQuestion(); 70 | hideScore(); 71 | } 72 | }); 73 | }); 74 | 75 | function displayCurrentQuestion(){ 76 | console.log('In display current Questions'); 77 | 78 | var question = questions[currentQuestion].question; 79 | var questionClass = document.querySelector('.quizContainer > .question'); 80 | var choiceList = document.querySelector('.quizContainer > .choiceList'); 81 | var numChoices = questions[currentQuestion].choices.length; 82 | 83 | //Set the questionClass text to the current question 84 | questionClass.innerText = question; 85 | 86 | //Remove all current
    • elements (if any) 87 | choiceList.innerHTML = ''; 88 | 89 | var choice; 90 | for (i = 0; i < numChoices; i++){ 91 | choice = questions[currentQuestion].choices[i]; 92 | var li = document.createElement('li'); 93 | li.innerHTML = '
    • ' + choice + '
      • ' 94 | choiceList.appendChild(li); 95 | 96 | } 97 | } 98 | 99 | function resetQuiz(){ 100 | currentQuestion = 0; 101 | correctAnswers = 0; 102 | hideScore(); 103 | } 104 | 105 | function displayScore(){ 106 | document.querySelector('.quizContainer > .result').innerText = 'You scored: ' + correctAnswers + ' out of ' + questions.length; 107 | document.querySelector('.quizContainer > .result').style.display = 'block'; 108 | } 109 | 110 | function hideScore(){ 111 | document.querySelector('.result').style.display = 'none'; 112 | } 113 | //https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event -------------------------------------------------------------------------------- /Filter Project/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); 2 | 3 | :root { 4 | --mainPink: #ef7998; 5 | --mainYellow: rgb(249, 228, 148); 6 | --mainWhite: #fff; 7 | --mainBlack: #000; 8 | --yellowTrans: rgba(249, 228, 148, 0.5); 9 | --mainGrey: rgb(238, 238, 238); 10 | } 11 | 12 | body { 13 | font-family: "Kaushan Script", cursive; 14 | background: var(--mainWhite); 15 | color: var(--mainBlack); 16 | } 17 | /* nav links */ 18 | .navbar-toggler { 19 | outline: none !important; 20 | } 21 | .toggler-icon { 22 | font-size: 2.5rem; 23 | color: var(--mainPink); 24 | } 25 | .nav-link { 26 | color: var(--mainPink); 27 | font-size: 1.5rem; 28 | transition: all 0.5s ease-in-out; 29 | } 30 | .nav-link:hover { 31 | color: var(--mainBlack); 32 | } 33 | /* end of nav links */ 34 | /* info icons */ 35 | .cart-info__icon { 36 | color: var(--mainBlack); 37 | cursor: pointer; 38 | } 39 | 40 | .cart-info { 41 | border: 0.1rem solid var(--mainBlack); 42 | color: var(--mainBlack); 43 | border-radius: 0.25rem; 44 | padding: 0.4rem 0.6rem; 45 | cursor: pointer; 46 | } 47 | .cart-info:hover { 48 | background: var(--mainPink); 49 | border-color: var(--mainPink); 50 | color: var(--mainWhite); 51 | } 52 | .cart-info:hover .cart-info__icon { 53 | color: var(--mainWhite); 54 | } 55 | /* end of info icons */ 56 | /* banner */ 57 | 58 | .max-height { 59 | min-height: calc(100vh - 76px); 60 | background: linear-gradient(var(--yellowTrans), var(--yellowTrans)), 61 | url("../img/headerBcg.jpeg") center/cover fixed no-repeat; 62 | position: relative; 63 | } 64 | .banner { 65 | color: var(--mainWhite); 66 | margin-top: -4rem; 67 | } 68 | .banner-title { 69 | color: var(--mainPink); 70 | font-size: 4rem; 71 | } 72 | .banner-link { 73 | font-size: 1.5rem; 74 | color: var(--mainBlack); 75 | border: 0.2rem solid var(--mainBlack); 76 | } 77 | .banner-link:hover { 78 | background: var(--mainBlack); 79 | color: var(--mainPink); 80 | } 81 | /* endo of banner */ 82 | /* cart */ 83 | .cart { 84 | position: absolute; 85 | min-height: 10rem; 86 | background: var(--mainWhite); 87 | top: 0; 88 | right: 0; 89 | transition: all 0.3s ease-in-out; 90 | background: rgba(255, 255, 255, 0.5); 91 | width: 0; 92 | overflow: hidden; 93 | } 94 | .show-cart { 95 | width: 18rem; 96 | padding: 2rem 1.5rem; 97 | transform: rotateY(-360deg); 98 | } 99 | .cart-item { 100 | transition: all 2s ease-in-out; 101 | } 102 | 103 | /* end of cart */ 104 | /* cart item */ 105 | .cart-item-remove { 106 | color: var(--mainPink); 107 | transition: all 1s ease-in-out; 108 | } 109 | .cart-item-remove:hover { 110 | transform: scale(1.1); 111 | color: var(--mainBlack); 112 | } 113 | #cart-item-price { 114 | font-size: 0.8rem; 115 | } 116 | /* cart item */ 117 | /* cart buttons */ 118 | .btn-pink { 119 | color: var(--mainPink) !important; 120 | border-color: var(--mainPink) !important; 121 | } 122 | .btn-black { 123 | color: var(--mainBlack) !important; 124 | border-color: var(--mainBlack) !important; 125 | } 126 | .btn-black:hover { 127 | color: var(--mainPink) !important; 128 | background: var(--mainBlack) !important; 129 | } 130 | .btn-pink:hover { 131 | background: var(--mainPink) !important; 132 | color: var(--mainBlack) !important; 133 | } 134 | /* end of cart buttons */ 135 | 136 | /* about */ 137 | .about-img__container { 138 | position: relative; 139 | } 140 | 141 | .about-img__container::before { 142 | content: ""; 143 | position: absolute; 144 | top: -1.5rem; 145 | left: -1.7rem; 146 | width: 100%; 147 | height: 100%; 148 | outline: 0.5rem solid var(--mainYellow); 149 | z-index: -1; 150 | transition: all 1s ease-in-out; 151 | } 152 | .about-img__container:hover:before { 153 | top: 0; 154 | left: 0; 155 | } 156 | 157 | /*end of about */ 158 | 159 | /* store items */ 160 | .store { 161 | background: var(--mainGrey); 162 | } 163 | .img-container { 164 | position: relative; 165 | overflow: hidden; 166 | cursor: pointer; 167 | } 168 | .store-img { 169 | transition: all 1s ease-in-out; 170 | } 171 | .img-container:hover .store-img { 172 | transform: scale(1.2); 173 | } 174 | .store-item-icon { 175 | position: absolute; 176 | bottom: 0; 177 | right: 0; 178 | padding: 0.75rem; 179 | background: var(--mainYellow); 180 | border-top-left-radius: 1rem; 181 | transition: all 1s ease-in-out; 182 | transform: translate(100%, 100%); 183 | } 184 | .img-container:hover .store-item-icon { 185 | transform: translate(0, 0); 186 | } 187 | .store-item-icon:hover { 188 | color: var(--mainWhite); 189 | } 190 | .store-item-value { 191 | color: --mainYellow; 192 | } 193 | /*end of store items */ 194 | .search-box { 195 | background: var(--mainPink); 196 | color: var(--mainBlack); 197 | } 198 | -------------------------------------------------------------------------------- /Budget OOP Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | budget app 18 | 20 | 21 | 22 | 23 |
      24 |
      25 |
      26 | 27 |

      budget app

      28 |
      29 |
      30 | 31 |
      budget feedback
      32 | 33 |
      34 |
      please enter your budget
      35 |
      36 | 37 |
      38 | 39 | 40 |
      41 |
      42 |
      43 | 44 |
      45 |
      46 |
      budget
      47 | 48 |

      $ 0

      49 |
      50 |
      51 |
      expenses
      52 | 53 |

      $ 0

      54 |
      55 |
      56 |
      balance
      57 | 58 |

      $ 0

      59 |
      60 |
      61 |
      62 |
      63 | 64 |
      65 |
      66 | 67 |
      expense feedback
      68 | 69 |
      70 |
      please enter your expense
      71 |
      72 | 73 |
      74 |
      please enter expense amount
      75 |
      76 | 77 |
      78 | 79 | 80 |
      81 |
      82 |
      83 | 84 |
      85 | 86 |
      87 |
      expense title
      88 |
      expense value
      89 |
      90 |
      91 | 92 | 93 | 111 | 112 | 113 | 114 |
      115 |
      116 |
      117 | 118 | 119 | 120 | 121 |
      122 |
      123 |
      124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /2D Canvas Game/app.js: -------------------------------------------------------------------------------- 1 | //Create variables to reference and store canvas 2 | let canvas = document.getElementById('mycanvas'); 3 | let ctx = canvas.getContext('2d'); 4 | let ballRadius = 10; 5 | let x = canvas.width/2; 6 | let y = canvas.height - 30; 7 | let dx = 2; 8 | let dy = -2; 9 | //create the paddle 10 | let paddleHeight = 12; 11 | let paddleWidth = 72; 12 | //specify starting point of paddle 13 | let paddleX = (canvas.width-paddleWidth)/2; 14 | //holding variables for right and left arrows on keyboard 15 | let rightPressed=false; 16 | let leftPressed=false; 17 | //holding variables for bricks 18 | let brickRowCount = 4; 19 | let brickColumnCount = 7; 20 | let brickWidth = 72; 21 | let brickHeight = 24; 22 | let brickPadding = 12; 23 | let brickOffsetTop = 32; 24 | let brickOffsetLeft = 32; 25 | //Create variables to take score 26 | let score = 0; 27 | 28 | //Creating arrays for the bricks 29 | let bricks = []; 30 | for (c =0; c 0 && relativeX < canvas.width) { 46 | paddleX = relativeX - paddleWidth/2; 47 | } 48 | } 49 | 50 | function keyDownHandler(e){ 51 | if(e.keyCode === 39){ 52 | rightPressed = true; 53 | } 54 | else if (e.keyCode === 37){ 55 | leftPressed = true; 56 | } 57 | } 58 | function keyUpHandler(e){ 59 | if(e.keyCode === 39){ 60 | rightPressed = false; 61 | } 62 | else if (e.keyCode === 37){ 63 | leftPressed = false; 64 | } 65 | } 66 | 67 | function drawBall(){ 68 | ctx.beginPath(); 69 | ctx.arc(x,y,ballRadius,0,Math.PI*2); //centered at (x,y) position with radius r = ballRadius starting at 0 = startAngle, ending at Math.PI*2 = endAngle (in Radians) 70 | ctx.fillStyle = 'red'; 71 | ctx.fill(); 72 | ctx.closePath(); 73 | } 74 | //Create a function to create the paddle 75 | function drawPaddle(){ 76 | ctx.beginPath(); 77 | ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight); //centered at (x,y) position with radius r = ballRadius starting at 0 = startAngle, ending at Math.PI*2 = endAngle (in Radians) 78 | ctx.fillStyle = 'blue'; 79 | ctx.fill(); 80 | ctx.closePath(); 81 | } 82 | //Create a function to draw the bricks 83 | function drawBricks(){ 84 | for(c=0; c < brickColumnCount; c++){ 85 | for(r=0; r < brickRowCount; r++){ 86 | if(bricks[c][r].status === 1){ 87 | let brickX = (c* (brickWidth + brickPadding)) + brickOffsetLeft; 88 | let brickY = (r* (brickHeight+brickPadding)) + brickOffsetTop; 89 | bricks[c][r].x=brickX; 90 | bricks[c][r].y=brickY; 91 | ctx.beginPath(); 92 | ctx.rect(brickX, brickY, brickWidth, brickHeight); 93 | ctx.fillStyle = '#6600cc'; 94 | ctx.fill(); 95 | ctx.closePath(); 96 | } 97 | } 98 | } 99 | } 100 | //Create function to keep track of score 101 | function drawScore(){ 102 | ctx.font = '18px Arial'; 103 | ctx.fillStyle = 'brown'; 104 | ctx.fillText('score: '+ score, 8, 20); //position score at 8,20 on the x,y axis of the canvas 105 | } 106 | 107 | //Collision dections for the bricks 108 | function collisionDetection(){ 109 | for(c=0; c b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight){ 114 | dy = -dy; 115 | b.status = 0; 116 | score++; 117 | if (score === brickRowCount*brickColumnCount){ 118 | alert('Congratulations!! You\'ve won!'); 119 | document.location.reload(); 120 | } 121 | } 122 | } 123 | } 124 | } 125 | } 126 | function draw(){ 127 | //clear each instance of the canvas so a new circle can be drawn 128 | ctx.clearRect(0,0,canvas.width, canvas.height); 129 | drawScore(); 130 | drawBricks(); 131 | drawBall(); 132 | drawPaddle(); 133 | collisionDetection(); 134 | //Calculate collision detections 135 | //left and right walls 136 | if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) { 137 | dx = -dx; 138 | } 139 | //top walls 140 | if(y + dy < ballRadius){ 141 | dy = -dy; 142 | } 143 | else if (y + dy > canvas.height-ballRadius){ 144 | //detect paddle hits 145 | if(x > paddleX && x < paddleX + paddleWidth){ 146 | dy=-dy; 147 | } 148 | //if no paddle hit, body of canvas is hit ==> game over 149 | else { 150 | alert('GAME OVER!!'); 151 | document.location.reload(); 152 | } 153 | } 154 | //bottom wall 155 | if (y + dy > canvas.height - ballRadius || y + dy < ballRadius){ 156 | dy = -dy; 157 | } 158 | //Make paddle move 159 | if(rightPressed && paddleX 0){ 163 | paddleX -= 7; 164 | } 165 | //Making the ball move 166 | x +=dx; //update x movement every frame 167 | y +=dy; //update y movement every frame 168 | } 169 | 170 | //Create an infinite loop that creates the ball 171 | //paints the ball on the canvas every 10 milliseconds. 172 | setInterval(draw, 10) 173 | 174 | 175 | //Notes 176 | //Using HTML Canvas 177 | //Understanding HTML Coordinates 178 | //Web APIs - https://developer.mozilla.org/en-US/docs/Web/API 179 | // Drawing shapes with Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial 180 | //MDN BrickerBreaker Tutorial https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 181 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /Budget OOP Project/js/app.js: -------------------------------------------------------------------------------- 1 | class UI { 2 | constructor() { 3 | this.budgetFeedback = document.querySelector(".budget-feedback"); 4 | this.expenseFeedback = document.querySelector(".expense-feedback"); 5 | this.budgetForm = document.getElementById("budget-form"); 6 | this.budgetInput = document.getElementById("budget-input"); 7 | this.budgetAmount = document.getElementById("budget-amount"); 8 | this.expenseAmount = document.getElementById("expense-amount"); 9 | this.balance = document.getElementById("balance"); 10 | this.balanceAmount = document.getElementById("balance-amount"); 11 | this.expenseForm = document.getElementById("expense-form"); 12 | this.expenseInput = document.getElementById("expense-input"); 13 | this.amountInput = document.getElementById("amount-input"); 14 | this.expenseList = document.getElementById("expense-list"); 15 | this.itemList = []; 16 | this.itemID = 0; 17 | } 18 | 19 | //submit budget method 20 | submitBudgetForm(){ 21 | const value = this.budgetInput.value; 22 | if(value === '' || value < 0){ 23 | this.budgetFeedback.classList.add('showItem'); 24 | this.budgetFeedback.innerHTML = `

      value cannot be empty or negative

      `; 25 | const self = this; 26 | setTimeout(function(){ 27 | self.budgetFeedback.classList.remove('showItem'); 28 | }, 3000); 29 | } else { 30 | this.budgetAmount.textContent = value; 31 | this.budgetInput.value = ''; 32 | this.showBalance(); 33 | } 34 | } 35 | 36 | //show balance 37 | showBalance(){ 38 | const expense = this.totalExpense(); 39 | const total = parseInt(this.budgetAmount.textContent) - expense; 40 | this.balanceAmount.textContent = total; 41 | if(total < 0){ 42 | this.balance.classList.remove('showGreen', 'showBlack'); 43 | this.balance.classList.add('showRed'); 44 | } else if(total > 0){ 45 | this.balance.classList.remove('showRed', 'showBlack'); 46 | this.balance.classList.add('showGreen'); 47 | } else if(total === 0){ 48 | this.balance.classList.remove('showRed', 'showGreen'); 49 | this.balance.classList.add('showBlack'); 50 | } 51 | } 52 | //submit expense form 53 | submitExpenseForm(){ 54 | const expenseValue = this.expenseInput.value; 55 | const amountValue = this.amountInput.value; 56 | if(expenseValue === '' || amountValue === '' || amountValue < 0){ 57 | this.expenseFeedback.classList.add('showItem'); 58 | this.expenseFeedback.innerHTML = `

      values cannot be empty or negative

      `; 59 | const self = this; 60 | setTimeout(function(){ 61 | self.expenseFeedback.classList.remove('showItem'); 62 | }, 3000) 63 | } else { 64 | let amount = parseInt(amountValue); 65 | this.expenseInput.value = ''; 66 | this.amountInput.value = ''; 67 | 68 | let expense = { 69 | id: this.itemID, 70 | title: expenseValue, 71 | amount: amount 72 | } 73 | this.itemID++; 74 | this.itemList.push(expense); 75 | this.addExpense(expense); 76 | this.showBalance(); 77 | 78 | } 79 | } 80 | 81 | //add expense 82 | addExpense(expense){ 83 | const div = document.createElement('div'); 84 | div.classList.add('expense'); 85 | div.innerHTML = `
      86 | 87 |
      - ${expense.title}
      88 |
      $${expense.amount}
      89 | 90 |
      91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |
      99 | 0){ 107 | total = this.itemList.reduce(function(acc, curr){ 108 | acc += curr.amount; 109 | return acc; 110 | }, 0) 111 | } 112 | this.expenseAmount.textContent = total; 113 | return total; 114 | } 115 | 116 | //edit expense 117 | editExpense(element){ 118 | let id = parseInt(element.dataset.id); 119 | let parent = element.parentElement.parentElement.parentElement; 120 | //remove from DOM 121 | this.expenseList.removeChild(parent); 122 | //remove from the list 123 | let expense = this.itemList.filter(function(item){ 124 | return item.id === id; 125 | }) 126 | //show values 127 | this.expenseInput.value = expense[0].title; 128 | this.amountInput.value = expense[0].amount; 129 | //remove from the list 130 | let tempList = this.itemList.filter(function(item){ 131 | return item.id !== id; 132 | }) 133 | this.itemList = tempList; 134 | this.showBalance(); 135 | } 136 | 137 | //delete expense 138 | deleteExpense(element){ 139 | let id = parseInt(element.dataset.id); 140 | let parent = element.parentElement.parentElement.parentElement; 141 | //remove from DOM 142 | this.expenseList.removeChild(parent); 143 | //remove from the list 144 | let tempList = this.itemList.filter(function(item){ 145 | return item.id !== id; 146 | }) 147 | this.itemList = tempList; 148 | this.showBalance(); 149 | } 150 | } 151 | 152 | function eventListeners(){ 153 | const budgetForm = document.getElementById('budget-form'); 154 | const expenseForm = document.getElementById('expense-form'); 155 | const expenseList = document.getElementById('expense-list'); 156 | 157 | //new instance of UI Class 158 | const ui = new UI(); 159 | 160 | //budget form submit 161 | budgetForm.addEventListener('submit', function(event){ 162 | event.preventDefault(); 163 | ui.submitBudgetForm(); 164 | }) 165 | //expense form submit 166 | expenseForm.addEventListener('submit', function(event){ 167 | event.preventDefault(); 168 | ui.submitExpenseForm(); 169 | 170 | }) 171 | //expense list submit 172 | expenseList.addEventListener('click', function(event){ 173 | if (event.target.parentElement.classList.contains('edit-icon')){ 174 | ui.editExpense(event.target.parentElement); 175 | }else if (event.target.parentElement.classList.contains('delete-icon')){ 176 | ui.deleteExpense(event.target.parentElement); 177 | } 178 | }) 179 | } 180 | 181 | document.addEventListener('DOMContentLoaded', function(){ 182 | eventListeners(); 183 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 100+ Javascript Projects for Beginners by JSBeginners.com 2 | This is the entry repository for all of my projects over at, JSBeginners.com. 3 | 4 | If you want to see these projects in action, go to [100+ javascript projects for beginners](https://jsbeginners.com/javascript-projects-for-beginners/). 5 | 6 | Follow the links on the above page to see the individual project and to see the source from which the project came. 7 | 8 | You'll also find the link to each project's individual source files so **you can do all these beginner projects yourself**. 9 | 10 | **Please note, if there isn't a link to one of the projects on the page above, I just haven’t completed the project yet.** 11 | 12 | ## List of 100+ JavaScript Projects for Beginners 13 | 14 | 1. Change Background Color Project 15 | 2. Hex Change Background Color Project 16 | 3. Random Quotes Project 17 | 4. Pass the Message Project 18 | 5. Counter Project 19 | 6. Background Image Slider Project 20 | 7. Testimonials Project 21 | 8. Filter Project 22 | 9. Modal Project 23 | 10. Calculator Project 24 | 11. Tip Form Project 25 | 12. To Do List Project 26 | 13. Grocery Cart Project 27 | 14. Grocery List Project 28 | 15. Course Form Project 29 | 16. Flashcard Project 30 | 17. Budget Application Project 31 | 18. Coffee Shop Project 32 | 19. Car Dealership Project 33 | 20. Random Joke Project 34 | 21. Random Person Project 35 | 22. HTTP Methods Project 36 | 23. Wikipedia Search Project 37 | 24. Weather Data Project 38 | 25. Github Project 39 | 26. Zomato Restaurant Project 40 | 27. Comfy House Project 41 | 28. Analogue Clock Project 42 | 29. Mortgage Loan Calculator Project 43 | 30. Quote of the day Project 44 | 31. BMI Calculator Project 45 | 32. Weight Conversion Project 46 | 33. Background Color Switcher Project 47 | 34. 2D Breakout Game Project 48 | 35. Digital Calculator Project 49 | 36. Digital Clock Project 50 | 37. Event Countdown Timer Project 51 | 38. Tip Calculator Project 52 | 39. Word Count Tool Project 53 | 40. Contact Form Project (using local storage) 54 | 41. Day of Week App Project 55 | 42. Background Color Changer Project 56 | 43. Image Slider Project 57 | 44. Addition Game Project 58 | 45. Todo List Project 59 | 46. Interactive Quiz Project 60 | 47. Countdown Timer Project 61 | 48. Balloon Popping Game Project 62 | 49. RSS News Feed Project 63 | 50. Number Guessing Game Project 64 | 51. Light Switch Effect Project 65 | 52. Greeting Message Project 66 | 53. Height Conversion Project 67 | 54. Wack A Mole Game Project 68 | 55. Notes App Project 69 | 56. Todo App Project 70 | 57. Hangman App Project 71 | 58. Recipe App Project 72 | 59. Tip Calculator Project 73 | 60. Welcome Messages Project 74 | 61. Dynamically Changing Message Project 75 | 62. Coin Toss Application Project 76 | 63. Rock Paper Scissors Game Project 77 | 64. Ultimate Dice Game Project 78 | 65. Play Audio Files and Sounds Project 79 | 66. JavaScript Dynamic Typing Test Project 80 | 67. Functionator Function Practice Project 81 | 68. Magic Eight Ball JavaScript Project 82 | 69. Combination Guesser Game Project 83 | 70. Word Scramble Project 84 | 71. Countdown Timer Project 85 | 72. Pattern Matching Game Project 86 | 73. Click Popper Game Project 87 | 74. High Low Card Game Project 88 | 75. Click Shape Game Project 89 | 76. Word Finding Game Project 90 | 77. JavaScript Car Game Project 91 | 78. Input Field Character Counter Project 92 | 79. Element Scrolling Content Code Snippet Project 93 | 80. Fun with The Document Object Model Project 94 | 81. Just JavaScript Click Counter Project 95 | 82. Image Popup Window Project 96 | 83. JavaScript Word Guessing Hangman Game Project 97 | 84. JavaScript Modal Popup Example Project 98 | 85. Image Carousel JavaScript Animated Slideshow Application Project 99 | 86. Star Rating Project 100 | 87. Plane Bomber Game Project 101 | 88. JavaScript Accordion Component Project 102 | 89. Chaser Box Game Project 103 | 90. Tool tip Project 104 | 91. Email Exacter Application Project 105 | 92. Popup Message Project 106 | 93. Clipboard – Copy and Move Project 107 | 94. Pure JavaScript Calculator Project 108 | 95. Editable Shopping List Project 109 | 96. Placeholder Image Path Generator Project 110 | 97. Catch Element Game Project 111 | 98. Element Mouse and Click Events Project 112 | 99. Create Form Validation Project 113 | 100. Cookie Get Set Tester Project 114 | 101. DOM Interaction Application Project 115 | 102. Google Sheet Data to CSV Exporter Project 116 | 103. Flying Bird Game Project 117 | 104. Number Guessing Game Project 118 | 105. Element Catcher Game Project 119 | 106. Alien Invader Game Project 120 | 107. Card War Game Project 121 | 108. YouTube API Connection Project 122 | 109. Brick Breaker Paddle Ball Game 123 | 110. Drum Kit Project 124 | 111. CSS + JavaScript Clock 125 | 112. Playing with CSS Variables and JS 126 | 113. Array Cardio Day 1 127 | 114. Flex Panels Image Gallary 128 | 115. Ajax Type Ahead 129 | 116. Array Cardio Day 2 130 | 117. Fun with HTML5 Canvas 131 | 118. 14 Must Know Dev Tools Tricks 132 | 119. Hold Shift to Check Multiple Checkboxes 133 | 120. Custom HTML5 Video Player Project 134 | 121. Key Sequence Detection (KONAMI CODE) 135 | 122. Slide in on Scroll Project 136 | 123. Objects and Arrays – Reference Vs Copy 137 | 124. LocalStorage and Event Delegation 138 | 125. CSS Text Shadow Mouse Move Effect 139 | 126. Sorting Band Names without articles 140 | 127. Tally String Times with Reduce 141 | 128. Unreal Webcam Fun 142 | 129. Native Speech Recognition Project 143 | 130. Geolocation based Speedometer and Compass Project 144 | 131. Follow Along Links 145 | 132. Speech Synthesis Project 146 | 133. Sticky Nav Project 147 | 134. Event Capture, Propagation, Bubbling and Once Project 148 | 135. Stripe Follow Along Dropdown Navigation Project 149 | 136. Click and Drag to Scroll 150 | 137. Experimental Video Speed Controller UI Project 151 | 138. Countdown Clock Project 152 | 139. Wack-a-Mole Game Project 153 | 154 | ## 100 JavaScript Projects for Beginners Challenge 155 | 156 | It's simple, but not easy. 157 | 158 | 1. Follow the link above to find any of the projects in the above list. 159 | 160 | 2. Read the description and follow the link on the project’s page to see how it functions (If the link is not available yet, it means I haven’t yet completed the project. But no worries. You can simply go to the course where I found the project). 161 | 162 | 3. For the projects I’ve completed, download or clone my repository from GitHub. 163 | 164 | 4. Delete the contents of the app.js file (or any other relevant js files) and then try to code out the JavaScript functionality for yourself. 165 | 166 | 5. Once you complete the app, share it in the comments on the JavaScript project page on the blog so everyone can acknowledge your accomplishment! That’s it! 167 | 168 | 6. **Bonus:** Share your completed project on Twitter with the hashtags #JSBeginners #100DaysOfCode 169 | 170 | ### Coming Later, React and Node Projects... 171 | -------------------------------------------------------------------------------- /Filter Project/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Filter Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Starter Template 16 | 18 | 19 | 20 | 21 | 22 |
      23 | 24 | 29 | 62 | 63 | 64 |
      65 |
      66 | 71 |
      72 | 73 |
      74 | 75 |
      76 | 77 |

      cart item

      78 |

      10.99

      79 |
      80 | 81 | 82 | 83 |
      84 | 85 | 86 |
      87 | 88 |
      89 | 90 |

      cart item

      91 |

      10.99

      92 |
      93 | 94 | 95 | 96 |
      97 | 98 | 99 |
      100 |
      total
      101 |
      $ 10.00
      102 |
      103 | 104 | 105 |
      106 | clear cart 107 | checkout 108 |
      109 | 110 | 111 |
      112 |
      113 |
      114 | 115 | 116 | 117 | 118 | 119 |
      120 | 121 | 122 |
      123 |
      124 | 125 |
      126 |
      127 |

      about

      128 |

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, aliquam voluptas 129 | beatae vitae expedita consectetur nesciunt quia deserunt asperiores facere fuga dicta fugiat corrupti et omnis 130 | porro at dolorum! Ad!

      131 | explore 132 | 133 |
      134 |
      135 |
      136 | 137 |
      138 |
      139 |
      140 |
      141 |
      142 | 143 | 144 | 145 | 146 | 147 |
      148 |
      149 | 150 |
      151 |
      152 |

      our

      153 |
      154 |
      155 | 156 | 157 |
      158 |
      159 | all 160 | cakes 161 | cupcakes 162 | sweets 163 | doughnuts 164 |
      165 |
      166 | 167 |
      168 | 169 |
      170 |
      171 |
      172 |
      173 | 174 |
      175 | 176 |
      177 | 178 |
      179 |
      180 |
      181 | 182 | 183 |
      184 | 185 |
      186 |
      187 |
      188 | 189 | 190 | 191 | 192 |
      193 |
      194 |
      195 |
      sweet item
      196 |
      $ 5
      197 | 198 |
      199 |
      200 | 201 | 202 |
      203 | 204 |
      205 | 206 | 207 |
      208 |
      209 |
      210 | 211 | 212 | 213 | 214 |
      215 |
      216 |
      217 |
      cupcake item
      218 |
      $ 5
      219 | 220 |
      221 |
      222 | 223 | 224 |
      225 | 226 |
      227 | 228 | 229 |
      230 |
      231 |
      232 | 233 | 234 | 235 | 236 |
      237 |
      238 |
      239 |
      cake item
      240 |
      $ 5
      241 | 242 |
      243 |
      244 | 245 | 246 |
      247 | 248 |
      249 | 250 | 251 |
      252 |
      253 |
      254 | 255 | 256 | 257 | 258 |
      259 |
      260 |
      261 |
      dougnut item
      262 |
      $ 5
      263 | 264 |
      265 |
      266 | 267 | 268 |
      269 | 270 |
      271 | 272 | 273 |
      274 |
      275 |
      276 | 277 | 278 | 279 | 280 |
      281 |
      282 |
      283 |
      sweet item
      284 |
      $ 10
      285 | 286 |
      287 |
      288 | 289 | 290 |
      291 | 292 |
      293 | 294 | 295 |
      296 |
      297 |
      298 | 299 | 300 | 301 | 302 |
      303 |
      304 |
      305 |
      cupcake item
      306 |
      $ 10
      307 | 308 |
      309 |
      310 | 311 | 312 |
      313 | 314 |
      315 | 316 | 317 |
      318 |
      319 |
      320 | 321 | 322 | 323 | 324 |
      325 |
      326 |
      327 |
      cake item
      328 |
      $ 10
      329 | 330 |
      331 |
      332 | 333 | 334 |
      335 | 336 |
      337 | 338 | 339 |
      340 |
      341 |
      342 | 343 | 344 | 345 | 346 |
      347 |
      348 |
      349 |
      dougnut item
      350 |
      $ 10
      351 | 352 |
      353 |
      354 | 355 | 356 |
      357 | 358 |
      359 | 360 | 361 |
      362 |
      363 |
      364 | 365 | 366 | 367 | 368 |
      369 |
      370 |
      371 |
      sweet item
      372 |
      $ 15
      373 | 374 |
      375 |
      376 | 377 | 378 |
      379 | 380 |
      381 | 382 | 383 |
      384 |
      385 |
      386 | 387 | 388 | 389 | 390 |
      391 |
      392 |
      393 |
      cupcake item
      394 |
      $ 15
      395 | 396 |
      397 |
      398 | 399 | 400 |
      401 | 402 |
      403 | 404 | 405 |
      406 |
      407 |
      408 | 409 | 410 | 411 | 412 |
      413 |
      414 |
      415 |
      cake item
      416 |
      $ 15
      417 | 418 |
      419 |
      420 | 421 | 422 |
      423 | 424 |
      425 | 426 | 427 |
      428 |
      429 |
      430 | 431 | 432 | 433 | 434 |
      435 |
      436 |
      437 |
      dougnut item
      438 |
      $ 15
      439 | 440 |
      441 |
      442 | 443 | 444 |
      445 | 446 |
      447 | 448 | 449 |
      450 |
      451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | --------------------------------------------------------------------------------