emacode2 / project-1 Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 15 KB

Travel Trivia Game

HTML 50.46% JavaScript 27.11% CSS 22.43%

project-1's People

Contributors

Watchers

project-1's Issues

Use kebab-case for CSS class names

We use camelCase for JS variables and kebab-case for CSS class names. It will work, but that's the convention so it's best to stick to it.

Project-1/index.html

Line 17 in abf97dc

<button class="wrongans">China</button>

Delete extra HTML file

You have 2 html files, but only need 1. Delete the extra one

Try picking one variable declaration format

Using both var and let is totally fine technically, but it looks a little messy. In later, more complex projects, it could also lead to some scoping issues. I recommend sticking with either var or let/const and not mixing them.

Project-1/script.js

Line 113 in abf97dc

for (var i = 0; i < correctans.length; i++) {

Make text uppercase with CSS

Careful with uppercase text as screenreaders will read this as an acronym. Instead, use text-transform: uppercase; in your CSS

Project-1/index.html

Line 11 in abf97dc

<h1>TRAVEL TRIVIA</h1>

Delete commented out code

Commented out code that gets checked in is called Dead Code ☠️

It makes the codebase look messy!

Project-1/script.js

Lines 1 to 103 in abf97dc

    
           // make an array for questions 
        
           // add an object to array for each question 
        
           // add questionText, choices, correctChoice 
        
           /* 
        
           questions = [ 
        
               { 
        
                   quest: "Where is this landmark located?", 
        
                   image: 
        
                   "https://i2.wp.com/www.designlike.com/wp-content/uploads/2011/12/800px-HagiaSophiaISTANBUL.jpg?resize=600%2C450&ssl=1", 
        
                   choices: ["Beirut", "Jerusalem", "Istanbul", "Cairo"], 
        
                   correctChoice: "IstanBul", 
        
               correctDiv: "cellsc" 
        
           }, 
        
           { 
        
               quest: "where is this landmark located?", 
        
               image: 
        
               "http://www.worldofwanderlust.com/wp-content/uploads/2015/07/memorial-1000x667.jpg", 
        
               choices: ["New York", "Beijing", "london", "Berlin"], 
        
               correctChoice: "New York", 
        
               correctDiv: "cellsa" 
        
           }, 
        
           { 
        
               quest: "where is this landmark located?", 
        
               image: 
        
               "http://www.worldofwanderlust.com/wp-content/uploads/2015/07/P1010590.jpg", 
        
               choices: ["India", "Malaysia", "Peru", "Mexico"], 
        
               correctChoice: "Peru", 
        
               correctDiv: "cellsb" 
        
           }, 
        
           { 
        
               quest: "where is this landmark located?", 
        
               image: 
        
               "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Newark-ohio-longaberger-headquarters-front.jpg/1200px-Newark-ohio-longaberger-headquarters-front.jpg", 
        
               choices: ["Ohio", "Amsterdam", "Massachussetts", "Manchester"], 
        
               correctChoice: "Ohio", 
        
               correctDiv: "cellsa" 
        
           } 
        
           ]; 
        
           // grab html document 
        
           //get find p tag for question 
        
           //attach node to p tag 
        
           //go to array queastions 
        
           //find fisrt object question. 
        
           //display on html p tag. 
        
           //find first div class cells 
        
           // create nodes in the DOM, 
        
           // go to questions array 
        
           // find first object 
        
           // find first property 
        
           // display on html 
        
           //find second div class (cells) 
        
           //create nodes in the DOM, 
        
           // go to questions array 
        
           // find first object 
        
           // find first property 
        
           // display on html 
        
           // get image in the first object 
        
           // display in the dom node for image 
        
           // get choices array 
        
           // find index for each string in the array 
        
           // get divs 
        
           // display each string in a separate div 
        
           //var firstquestion = document.querySelector(".cell"); 
        
           //var container = document.querySelector(".container"); 
        
           */ 
        
           /*questions = [ 
        
             { 
        
               quest: "what was the most visited country in 2018?", 
        
               choices: ["China", "Italy", "USA", "France"], 
        
               correctChoice: "France", 
        
               correctDiv: ".cellsd" 
        
             }, 
        
             { 
        
               quest: "What was the most visited city in 2018?", 
        
               choices: ["Dubai", "Paris", "BangKok", "New York"], 
        
               correctChoice: "Bangkok", 
        
               correctDiv: "cellsc" 
        
             }, 
        
             { 
        
               quest: "Pashto is an official language spoken in which country?", 
        
               choices: ["laos", "Afghanistan", "Cambodia", "India"], 
        
               correctChoice: "Afghanistan", 
        
               correctDiv: "cellsb" 
        
             } 
        
           ]; 
        
           /*let getquestion = document.querySelector(".prompts"); 
        
           getquestion.innerHTML = questions[currentquestion].quest; 
        
           // document.getElementById(id).style.property = new style 
        
           questions[currentquestion].choices.forEach(element => { 
        
             var div = document.createElement("div"); 
        
             div.className = "cells"; 
        
             div.textContent = element; 
        
             container.appendChild(div); 
        
           }); 
        
           // questions[0].image = {

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

	// make an array for questions
	// add an object to array for each question
	// add questionText, choices, correctChoice

	/*
	questions = [
	{
	quest: "Where is this landmark located?",
	image:
	"https://i2.wp.com/www.designlike.com/wp-content/uploads/2011/12/800px-HagiaSophiaISTANBUL.jpg?resize=600%2C450&ssl=1",
	choices: ["Beirut", "Jerusalem", "Istanbul", "Cairo"],
	correctChoice: "IstanBul",
	correctDiv: "cellsc"
	},
	{
	quest: "where is this landmark located?",
	image:
	"http://www.worldofwanderlust.com/wp-content/uploads/2015/07/memorial-1000x667.jpg",
	choices: ["New York", "Beijing", "london", "Berlin"],
	correctChoice: "New York",
	correctDiv: "cellsa"
	},
	{
	quest: "where is this landmark located?",
	image:
	"http://www.worldofwanderlust.com/wp-content/uploads/2015/07/P1010590.jpg",
	choices: ["India", "Malaysia", "Peru", "Mexico"],
	correctChoice: "Peru",
	correctDiv: "cellsb"
	},

	{
	quest: "where is this landmark located?",
	image:
	"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Newark-ohio-longaberger-headquarters-front.jpg/1200px-Newark-ohio-longaberger-headquarters-front.jpg",
	choices: ["Ohio", "Amsterdam", "Massachussetts", "Manchester"],
	correctChoice: "Ohio",
	correctDiv: "cellsa"
	}
	];

	// grab html document
	//get find p tag for question
	//attach node to p tag
	//go to array queastions
	//find fisrt object question.
	//display on html p tag.

	//find first div class cells
	// create nodes in the DOM,
	// go to questions array
	// find first object
	// find first property
	// display on html
	//find second div class (cells)
	//create nodes in the DOM,
	// go to questions array
	// find first object
	// find first property
	// display on html
	// get image in the first object

	// display in the dom node for image
	// get choices array
	// find index for each string in the array
	// get divs
	// display each string in a separate div

	//var firstquestion = document.querySelector(".cell");
	//var container = document.querySelector(".container");
	*/
	/*questions = [
	{
	quest: "what was the most visited country in 2018?",
	choices: ["China", "Italy", "USA", "France"],
	correctChoice: "France",
	correctDiv: ".cellsd"
	},
	{
	quest: "What was the most visited city in 2018?",
	choices: ["Dubai", "Paris", "BangKok", "New York"],
	correctChoice: "Bangkok",
	correctDiv: "cellsc"
	},
	{
	quest: "Pashto is an official language spoken in which country?",
	choices: ["laos", "Afghanistan", "Cambodia", "India"],
	correctChoice: "Afghanistan",
	correctDiv: "cellsb"
	}
	];

	/*let getquestion = document.querySelector(".prompts");
	getquestion.innerHTML = questions[currentquestion].quest;
	// document.getElementById(id).style.property = new style

	questions[currentquestion].choices.forEach(element => {
	var div = document.createElement("div");
	div.className = "cells";
	div.textContent = element;
	container.appendChild(div);
	});
	// questions[0].image = {