Skip to content

elisa draw-this #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elisaes wants to merge 2 commits into
base: master
Choose a base branch
from
Open

elisa draw-this #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5450cf
first part
elisaes Jun 15, 2020
eddd80d
Elisa homework
elisaes Jun 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<input class="starter" id="input" placeholder="input"/>
<h2>output:</h2>
<p class="starter" id="output"></p>
<script>
document.querySelector('#input').addEventListener('change', function(event){
var currentInput = event.target.value;
inputHappened(currentInput)
});

</script>
<div class = "content">
<h1>CHOOSE THE MODE</h1>
<button id = "rows">ROWS</button>
<button id = "triangles">TRIANGLES</button>
</div>
<script src="script.js"></script>
</body>
</html>
112 changes: 105 additions & 7 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,109 @@
console.log("hello script js");
const gameObj = {
rows: {
mode: "rows",
title: "YOU ARE IN THE ROWS MODE",
description:
"Please insert the numbers of rows that you want to display, and press enter",
id: "inputRows",
},
triang: {
mode: "triang",
title: "YOU ARE IN THE TRIANGLES MODE",
description:
"please insert the numbers of emoji that you want to make your triangle side",
id: "inputTriang",
},
};

let emojiArr = [];

//---------------------------------ROWS------------------//
const makeRows = (e) => {
appendingElements(
gameObj.rows.title,
gameObj.rows.description,
gameObj.rows.id,
inputHappenedRows
);
};

const inputHappenedRows = (e) => {
emojiArr = [];
const rows = document.createElement("div");
rows.className = "rowsEmoji";
const inputValue = e.target.value;
console.log("inputValue", inputValue);

for (let i = 0; i < inputValue; i++) {
emojiArr.push("🍓");
}
console.log("emojiArr", emojiArr);
rows.innerHTML = emojiArr;

var inputHappened = function(currentInput){
console.log( currentInput );
display( "WOW SOMETHING HAPPENED" );
document.querySelector(".display").appendChild(rows);
};

var display = function(stuffToDisplay){
// your DOM manipulation code here

//---------------------------TRIANGLES-------------//

const makeTriang = (e) => {
appendingElements(
gameObj.triang.title,
gameObj.triang.description,
gameObj.triang.id,
inputHappenedTriang
);
};

const inputHappenedTriang = (e) => {
document.querySelector(".display").innerHTML = "";
const numbBlocksArr = [];

const numbBlocks = e.target.value;
for (let i = 0; i < numbBlocks; i++) {
const numbBlocksEl = document.createElement("div");
numbBlocksEl.className = "rowsEmoji";
numbBlocksArr[i] = "🍓";
numbBlocksEl.innerHTML = numbBlocksArr;
document.querySelector(".display").appendChild(numbBlocksEl);

console.log("numbBlocksArr", numbBlocksArr);
}
};

//-----------------APPEND ELEMENTS FUNCTION------------------//
const appendingElements = (titleText, descriptionGame, id, inputFunction) => {
const content = document.querySelector(".content");
const title = document.createElement("h1");
const description = document.createElement("p");
const inputRows = document.createElement("input");
const rowsDisplay = document.createElement("div");
const clearButton = document.createElement("button");
content.innerHTML = "";
title.innerText = titleText;

content.appendChild(title);
description.innerText = descriptionGame;

content.appendChild(description);

inputRows.id = id;

content.appendChild(inputRows);
inputRows.addEventListener("change", inputFunction);

rowsDisplay.className = "display";
document.querySelector("body").appendChild(rowsDisplay);

clearButton.class = "clearButton";
clearButton.innerText = "clear";
clearButton.addEventListener("click", clear);
content.appendChild(clearButton);
};
//-------------------------------CLEAR FUNCTION-----------------------//
const clear = () => {
document.querySelector(".display").innerHTML = "";
};
//---------------------------event listeners-------------------//
document.querySelector("#rows").addEventListener("click", makeRows);

document.querySelector("#triangles").addEventListener("click", makeTriang);
13 changes: 5 additions & 8 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
.starter{
font-size:30px;
padding:10px;
display:block;
margin:40px;
border:3px solid blue;
body {
text-align: center;
background-color: cyan;
}

#output{
background-color:pink;
.display {
padding: 50px;
}