diff --git a/BANNER.png b/BANNER.png new file mode 100644 index 00000000..f09511cb Binary files /dev/null and b/BANNER.png differ diff --git a/BANNER2.jpg b/BANNER2.jpg new file mode 100644 index 00000000..706ab069 Binary files /dev/null and b/BANNER2.jpg differ diff --git a/BANNER3.jpg b/BANNER3.jpg new file mode 100644 index 00000000..e754543b Binary files /dev/null and b/BANNER3.jpg differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..fb329792 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..a0c97804 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + Curiosidades-Quimicas + + + + + + + + + +
+ +
+
+ +
+

Busque conhecimento

+ + + +
+
+ +
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..9b120744 --- /dev/null +++ b/index.js @@ -0,0 +1,179 @@ +let input = document.getElementById("search"); +input.addEventListener("keypress", function (event) { + if (event.key === "Enter") { + printSearch() + } +}); +/* - [*] Tela de listagem com título +- [*] ao menos três itens listados */ +const chemicalCompoundList = [ + { + id: "0", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Sodium-hypochlorite.png/1024px-Sodium-hypochlorite.png", + nomeCientifico: "Hipoclorito de sódio", + nomeMaisConhecido: "Água Sanitária", + atomosDaFormula: ["Sódio", "Cloro", "Oxigênio"], + massaMolar: 74.44, + usos: ["Remoção de manchas de roupas sujas", "desenfetar superfícies", "desinfecção da água potável"], + solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/Hipoclorito_de_s%C3%B3dio" + }, + + { + id: "1", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Acetic-acid-2D-flat.png/1024px-Acetic-acid-2D-flat.png", + nomeCientifico: "Ácido acético", + nomeMaisConhecido: "Vinagre", + atomosDaFormula: ["Carbono", "Hidrogênio", "Oxigênio"], + massaMolar: 60.052, + usos: ["Condimentar saladas", "produção da aspirina", "síntese de perfumes e corantes"], + solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/%C3%81cido_etanoico" + }, + { + id: "2", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/L-Ascorbic_acid.svg/1024px-L-Ascorbic_acid.svg.png", + nomeCientifico: "Ácido ascórbico", + nomeMaisConhecido: "Vitamina C", + atomosDaFormula: ["Carbono", "Hidrogênio", "Oxigênio"], + massaMolar: 176.09, + usos: ["Suplementação alimentar", "adubo para plantas", "conservação de alimentos industrializados"], + solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/%C3%81cido_asc%C3%B3rbico" + + }, + { + id: "3", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Ethanol_flat_structure.png/1024px-Ethanol_flat_structure.png", + nomeCientifico: "Etanol", + nomeMaisConhecido: "Álcool etílico", + atomosDaFormula: ["Carbono", "Hidrogênio", "Oxigênio"], + massaMolar: 46.06, + usos: ["Utilizado como combustível para veículos", "matéria prima na indústria de tintas, solventes e vernizes", "emprego de álcool hidratado é na indústria farmacêutica, alcoolquímica e de bebidas"], + solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/Etanol" + + }, + { + id: "4", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Hydrogen-peroxide-2D.png/1024px-Hydrogen-peroxide-2D.png", + nomeCientifico: "Peróxido de hidrogênio", + nomeMaisConhecido: "Água oxigenada", + atomosDaFormula: ["Hidrogênio", "Oxigênio"], + massaMolar:34.02, + usos: [" Uso medicinal e como clareador da roupa e do cabelo", " como combustível para ajuste e correção nas trajetórias e órbitas de satélites artificiais no espaço", "componente da espuma de borracha orgânica e outras substâncias químicas"], solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/Per%C3%B3xido_de_hidrog%C3%AAnio" + + }, + { + id: "5", + image: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Acetone-2D-skeletal.svg/800px-Acetone-2D-skeletal.svg.png", + nomeCientifico: "Propanona", + nomeMaisConhecido: "Acetona", + atomosDaFormula: ["Carbono", "Hidrogênio", "Oxigênio"], + massaMolar: 58.08, + usos: ["Serve como solvente em esmaltes, tintas, vernizes e supercola", "extração de óleos", "fabricação de fármacos"], + solubilidadeEmAgua: true, + link: "https://pt.wikipedia.org/wiki/Acetona" + + } +] +/* - [*] Itens listados **utilizando manipulação do DOM** */ +function render(chemicalCompoundList) { + const cards = document.getElementById("cards") + let card = ""; + for (const chemicalCompound of chemicalCompoundList) { + card += ` +
+ + + +
` + } + cards.innerHTML = card; +} +render(chemicalCompoundList) +/* - [*] Verificação de valores booleanos true impressa no console */ +const specimen = [] +function verificar(list) { + for (const i in list) { + if (list[i].solubilidadeEmAgua === true) { + specimen.push(list) + } + else { + alert(`${list[i].nomeCientifico} não é solúvel em água`) + + } + } +} +verificar(chemicalCompoundList) +/* - [*] Média numérica calculada e impressa no console */ +function averageCalculation(list) { + let numerator = 0 + for (const i in list) { + numerator += list[i].massaMolar + } + return numerator / list.length +} +averageCalculation(chemicalCompoundList) +console.log(`A média dos valores de massa molar é: ${averageCalculation(chemicalCompoundList).toFixed(2)}`) +console.log("\n") +/* - [*] Relatório impresso no console com as informações de cada item */ +/* - [*] título dos itens em letras maiúsculas */ +function print(array) { + for (const object of array) { + for (const property in object) { + if ((object[property]) === object["nomeCientifico"]) { + console.log(`${object["nomeCientifico"].toUpperCase()}`) + } + else if (Array.isArray(object[property])) { + console.log(`${property}: ${object[property].join(", ")}`) + } + + else if ((object[property]) === object["id"] || ((object[property]) === object["image"])) { + continue + } + + else if ((object[property]) === object["link"] || ((object[property]) === object["image"])) { + continue + } + else { + console.log(`${property}: ${object[property]}`); + } + + } + console.log("\n") + } + +} +print(chemicalCompoundList) +/* - [*] Barra de pesquisa com alerta se tentar pesquisar com campo em branco +- [*] Clique do botão executa busca entre os itens */ + +function displayElement(chemicalCompoundList, searchString) { + for (i in chemicalCompoundList) { + if (chemicalCompoundList[i].nomeCientifico.toUpperCase().includes(searchString.toUpperCase())) { + let item = document.getElementById(chemicalCompoundList[i].id) + item.style.display = "block" + } + } +} + +function printSearch() { + let containerList = document.getElementsByClassName("container") + for (container of containerList) { + container.style.display = "none" + } + let item = document.getElementById("search").value + if (document.getElementById("search").value.length ===0) { + alert("Digite algo no campo de pesquisa") + } + else { + displayElement(chemicalCompoundList, item) + } +} diff --git a/readme b/readme new file mode 100644 index 00000000..d003be5f --- /dev/null +++ b/readme @@ -0,0 +1,32 @@ + + +
+ +
+
+ \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..4673362c --- /dev/null +++ b/style.css @@ -0,0 +1,134 @@ +/*- [ ] Atenção ao padrão de estilização enviado */ +body { + font-family: 'Mukta', sans-serif; +} + +header {} + +#banner-img { + max-width: 100%; + width: 100%; +} + +.input { + display: flex; + align-items: center; + justify-content:end; + margin: 20px; +} + +.input h1 { + height: 100%; + font-size: 24px; + color: #4CAF50; + margin-right: 20px; + padding: 20px; +} + +label[for="search"] { + display: none; +} + +#search { + border: none; + background-color:rgb(232,240,254); + padding: 12px; + font-size: 18px; + width: 50%; + max-width: 300px; + border-radius: 25px; +} + +#searchValidated { + border: none; + background-color: transparent; + color: #4CAF50; + padding: 6px; + font-size: 20px; + cursor: pointer; +} + +#searchValidated i { + font-size: 35px; +} + +a { + text-transform: uppercase; + color: #000000; + font-weight: bold; + font-size: 14px; + text-decoration: none; + +} + +a:hover { + color: blue; + text-decoration: underline; +} + +#cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 16px; + margin: 16px; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 16px; + border: 2px solid #000; + border-radius: 15px; + +} + +.molecule { + width: 60%; + object-fit: cover; + margin: 26px; +} + +ul { + margin: 0 15px; + text-align: justify; +} + +li { + margin-bottom: 5px; +} + +footer { + background-color: #333; + color: #fff; + text-align: right; + padding: 16px; +} + +footer p { + margin: 0; + padding: 0; +} + + + +@media (max-width: 768px) { + #banner-img { + flex-basis: 50%; + max-height: 200px; + } + + #cards { + grid-template-columns: repeat(2, 1fr); + } +} + + +@media (max-width: 480px) { + .input h1 { + padding: 10px; + font-size: 18px;} + #cards { + grid-template-columns: 1fr; + } +} \ No newline at end of file