Overview of all Projects

project_picmonic

Lesson 2 Projects - Prgroamming with JavaScript

2lessonProjects2

Lesson 3 Projects - Your first website

3lessonProjects

Lesson 4 Projects - JQuery

4lessonProjects

2. Programming with Javascript - Run projects

Javasdcript 21

2.1 Lottery App

User picks 4 numbers, 7 numbers are all called ranging from 1-100, if user gets 1 number right they win $5, 2 gets $25, 3 gets $525, and 4 gets $275,625 (for loop)

Load App
22

2.2 Multiplication Quiz 2.0

User continues to play until they get one wrong (while loop)

Load App
23

2.3 # Memorizer

User is given a random 4 digit number, they must memorize it and then re-enter it, if the user gets it right, the game plays again with 5 digits. Keeps going until user gets it wrong (while loop)

Load App
24

2.4 Grocery list

User can add, delete, or finish the grocery list. App continues until finish is entered in. Each iteration, user is shown entire grocery list. (add, delete from list)

Load App
25

2.5 Friend Facts

User is asked what is their friends name, favorite cake type, and birthday, hometown. Then user can type in what they want to know about their friend or enter finish. (dictionary)

Load App
26

2.6 Dice Game

User can place a bet before rolling the dice and then roll the dice. If they roll a 7, they double their money, if they roll a 2, they lose it all. (functions)

Load App
27

2.7 Celebrity greeting

Create an Object Constructor for movie stars that greets users and tells them the celebrity’s top grossing movie. (object constructors)

Load App
28

2.8. Celebrity trivia

Same thing as Friends fact except the 3 celebrities are already populated with information as MovieStar objects and put into a stars list. User is asked 3 random questions about the celebrity. (objects in a list)

Load App

3. Your First Website - Run projects

31

3.1 Hello World with CSS

Create a hello world page and learn how to use classes to change the color of the font

Load App
32

3.2 Gigantic Candy Company Site

  • Step 1) Build a basic one page website with headers and images.
  • Step 2) Add a second page
  • Step 3) Use Flex Boxes to dynamic change box size for different browsers and devices

Load App
33

3.3 CSS Puzzles

Test your knowledge of CSS formating rules with 9 fun puzzles.

Load App
34

3.4 Winston’s Landing Page

Build a landing page for people to sign up for Winston’s cooking, eating, and drinking guide.

Load App
35

3.5 Pisco Sour Recipe

Build a two column website to add a Pisco Sour recipe to Winston’s website. (2 column page)

Load App
36

3.6 Mentor Finder

Build a home page for people to create profiles to become a mentor or mentee and find someone to mentor or be mentored by. (Home page)

Load App
37

3.7 Mobile First Design

Learn about formating your webpage for mobile devices and use one piece of code to transfrom your website from browswer format to a mobile format without having to create two sepearte websites.

Load App

4. JQuery - Run projects

41

4. Color Switcher

User types color into form and presses submit button to change background color of website

Load App
42

4.2 Background drop down menu

Create a pre-populated drop down menu that changes the background picture when drop down menu is selected.

Load App
43

4.3 Grocery List

User can add or delete items from grocery list. App continues until finish is entered in. Each iteration, user is shown entire grocery list. Grocery list is displayed in HTML. User can enter items into a form and press add or delete buttons to edit grocery list.

Load App
44

4.4 Bob’s blog

Allow users to click on a button to read more. Similar to blogs or eCommerce more info buttons.

Load App
45

4.5 Traffic Light

Create a traffic light / stop light!

Load App
46

4.6 Cash Register

Add item dollar amounts to create a running tally of expenses.

Load App
47

4.7 Rock Paper Scissors

Play rock paper scissors against the computer.

Load App
48

4.8 User Profile

New users can create and edit a profile page. Data is stored locally.

Load App