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