From f97e4bdc0bc97ed82847d09aae7dc9c8dc9c2b51 Mon Sep 17 00:00:00 2001 From: Viktor-1995 Date: Tue, 28 Apr 2026 12:47:11 +0200 Subject: [PATCH] solution 1.0 --- src/index.html | 2 +- src/scripts/main.js | 33 +++++++++++++++++++++++++++++++ src/styles/main.css | 43 +++++++++++++++++++++++++++++++++++++++++ src/styles/main.css.map | 1 + 4 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 src/styles/main.css create mode 100644 src/styles/main.css.map diff --git a/src/index.html b/src/index.html index 7ed0f9d5..5d898f15 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Promise basics diff --git a/src/scripts/main.js b/src/scripts/main.js index c6e3f878..ceb835f9 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,36 @@ 'use strict'; // write your code here +const body = document.getElementsByTagName('body')[0]; +const logo = document.getElementsByClassName('logo')[0]; + +const promise1 = new Promise((resolve, reject) => { + logo.addEventListener('click', (e) => { + resolve(); + }); +}); +const promise2 = new Promise((resolve, reject) => { + setTimeout(() => { + reject(errorShow); + }, 3000); +}); + +function showMessage() { + const successMessage = document.createElement('div'); + + successMessage.className = 'message'; + successMessage.innerText = 'Promise was resolved!'; + + body.appendChild(successMessage); +} + +function errorShow() { + const div = document.createElement('div'); + + div.className = 'message error-message'; + div.textContent = 'Promise was rejected!'; + body.appendChild(div); +} + +promise1.then(showMessage).catch(errorShow); +promise2.then(showMessage).catch(errorShow); diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 00000000..e007d7fd --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,43 @@ +body { + background: #eee; + font-family: Roboto, sans-serif; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.logo { + text-transform: uppercase; + background-color: #fc4b3b; + color: white; + border-radius: 16px; + user-select: none; + width: 70px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; +} + +.message { + position: absolute; + top: 50px; + right: 50px; + padding: 25px; + width: 200px; + font-family: Verdana, sans-serif; + font-size: 18px; + font-weight: 500; + text-align: center; + border-radius: 15px; + background-color: rgba(230, 230, 0, 0.5); +} + +.error-message { + background-color: rgba(204, 51, 0, 0.5); + right: 350px; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 00000000..bc18b1ca --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;;;AAGF;EACE;EACA","file":"main.css"} \ No newline at end of file