Code Monkey home page Code Monkey logo

tutorial-project-excuse-generator-javascript's Introduction

alt text The Excuse Generator

Disneyland for procrastinators and lazy people.

This project is ideal for avoiding someone annoying, it takes no more than 20 lines of code and it can save you for the rest of your life!

The Goal

We wanted a project that uses very little Javascript but still with a very fun application. The excuse generator takes 20 lines of code, is super simple to understand and is the perfect first project for any beginner developer.

Instructions

Please create a small website that generates an excuse each time a button is pressed, it has to look like this: Checkout the demo animation.

Discuss with your classmates the strategy first

How can we generate an excuse? How are sentences build?

Excuse generator explanation

The idea is to generate each part of the sentence randomly to come up with great excuses!

Hint

  1. Create a index.html with one excuse hard-coded, no js, just one excuse in pure plain HTML.
  2. The excuse must be inside an HTML tag that has an id assinged, for example:
  <p id="excuse">My dog ate my homework</p>
  1. Using javascript, create a function that generates and returns a random excuse with the following structure:
let who = ['The dog','My grandma','His turtle','My bird'];
let action = ['ate','peed','crushed','broke'];
let what = ['my homework', 'the keys', 'the car'];
let when = ['before the class','right on time','when I finished','during my lunch','while I was praying'];
  1. To create a consistent excuse you have to concatenate one item from each array in the proper order.
  2. Call that function onLoad and set the excuse into the innerHTML of the #excuse HTML element.

Technologies

HTML, CSS3, Sass, Javascript, Webpack.

Fundamentals

This exercise covers the following fundamentals:

  1. Using external Javascript files in your project.
  2. How to work with Arrays.
  3. Generating random numbers.
  4. Concatenating strings.
  5. Using functions (at least a bit).
  6. Working with events (at least a bit).

tutorial-project-excuse-generator-javascript's People

Contributors

alesanchezr avatar alexbrowng avatar elviraqdp avatar gmihov001 avatar jimenaeb avatar ancobacr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.