Skip to content

Commit 4d44c84

Browse files
tutosrivetutosrive
committed
Fisrt light weight version
0 parents  commit 4d44c84

6 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎assets/css/main.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import url("./objects.css");
2+
3+
:root{
4+
margin: 20px;
5+
}
6+
7+
.w-full{
8+
width: 95vw !important;
9+
}
10+
11+
.h-full{
12+
height: 99dvh !important;
13+
}
14+
15+
.d-block{
16+
display: block !important;
17+
}
18+
19+
.card{
20+
border-radius: 20px !important;
21+
box-shadow: 2px 2px 5px #F8F8F8 !important;
22+
}
23+
24+
.m-s{
25+
margin: 1px !important;
26+
}
27+
28+
.wff{
29+
width: 90% !important;
30+
}
31+
32+
.hff{
33+
height: 90% !important;
34+
}
35+
36+
.ctn-styles{
37+
width: 90vw;
38+
height: 70vh;
39+
margin: auto auto !important;
40+
}
41+
42+
.ctn-styles style{
43+
padding: 15px;
44+
font-size: x-large;
45+
}
46+
47+
.ctn-styles style:focus{
48+
border: none;
49+
outline: none;
50+
}
51+
52+
#objects{
53+
display: flex;
54+
height: 80px;
55+
margin: auto auto !important;
56+
top: 20px;
57+
transform: translateY(30px);
58+
overflow: scroll;
59+
}
60+
61+
footer, h1{
62+
text-align: center;
63+
}
64+
65+
footer a,h1 a{
66+
color: #FFD22F;
67+
}

‎assets/css/objects.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.ctn-objs{
2+
width: 100% !important;
3+
z-index: 91;
4+
display: flex;
5+
}
6+
7+
.obj1, .obj2, .obj3,
8+
.obj4, .obj5{
9+
width: 90px;
10+
aspect-ratio: 1/1;
11+
background: blue;
12+
margin: 2px;
13+
border: dashed 1px red;
14+
}
15+
16+
.obj1{
17+
18+
}
19+
20+
.obj2{}
21+
22+
.obj3{}
23+
24+
.obj4{}
25+
26+
.obj5{}

‎assets/js/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Utils from './utils.js'
2+
3+
class Main{
4+
static htmlStyles
5+
static rootCtn
6+
static objectsCtn
7+
8+
static async init(){
9+
Main.rootCtn = document.querySelector("#root")
10+
//Main.objectsCtn = document.querySelector("#objects")
11+
12+
await Main.loadHTML()
13+
Main.writeHTML()
14+
}
15+
16+
static async loadHTML(){
17+
Main.htmlStyles = Utils.coreHTML()
18+
//Main.htmlObjects = Utils.objectsHTML()
19+
}
20+
21+
static writeHTML(){
22+
Main.rootCtn.innerHTML = `${Main.htmlStyles}`
23+
//Main.objectsCtn.innerHTML = `${Main.htmlObjects}`
24+
}
25+
}
26+
27+
Main.init()

‎assets/js/models.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export class BaseResponse{
2+
constructor(ok = true, error = null){
3+
this.ok = ok
4+
this.error = error
5+
}
6+
}
7+
8+
export class AdvResponse extends BaseResponse{
9+
constructor(ok = true, error = null, data = null, msg = "Success"){
10+
super(ok, error)
11+
this.data
12+
this.msg = msg
13+
}
14+
}

‎assets/js/utils.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {BaseResponse, AdvResponse} from './models.js'
2+
3+
export default class Utils{
4+
constructor(){
5+
throw new Error("Don't require a instance for this!")
6+
}
7+
8+
static async getFile(filename = null, isJson = true){
9+
if(filename === null) {throw new Error("Missing the 'File Name'!")}
10+
11+
let data = new AdvResponse()
12+
13+
try{
14+
const req = await fetch(filename)
15+
const res = await isJson === true ? req.json() : req.text()
16+
17+
if(req.ok === true && req.status === 200){
18+
data.data = await res
19+
data.ok = req.ok
20+
data.msg = `The request was successfully with status: ${req.status}`
21+
} else {
22+
data.msg = `Tbe request was bad with status: ${req.status}`
23+
data.ok = req.ok
24+
}
25+
26+
return data
27+
} catch(e){
28+
data.ok = false
29+
data.msg = "Internal error ... Try again"
30+
data.error = e
31+
}
32+
}
33+
34+
static coreHTML(){
35+
return `<div id="ctn-style" class="ctn-styles d-block card m-s">
36+
<style class="d-block wff hff" contenteditable>body {
37+
background: #333;
38+
margin: 0px;
39+
box-sizing: border-box;
40+
color: white;
41+
}</style>
42+
</div>`
43+
}
44+
45+
static objectsHTML(){
46+
return `<div class="ctn-objs">
47+
<div class="obj1">
48+
<div class="hidden1"></div>
49+
</div>
50+
<div class="obj2">
51+
<div class="hidden2"></div>
52+
</div>
53+
<div class="obj3">
54+
<div class="hidden3"></div>
55+
</div>
56+
<div class="obj4">
57+
<div class="hidden4"></div>
58+
</div>
59+
<div class="obj5">
60+
<div class="hidden5"></div>
61+
</div>
62+
</div>`
63+
}
64+
}

‎index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>CSS Editor Online Quickly | CSS-EOQ | Editor CSS Ligero En Línea</title>
9+
10+
<script defer type="module" src="./assets/js/main.js"></script>
11+
<link rel="stylesheet" href="./assets/css/main.css">
12+
</head>
13+
14+
<body>
15+
<h1>CSS EOQ - <a href="https://dev2forge.is-a.software">Dev2Forge</a></h1>
16+
<p>Try modifying the body of this page.Try modifying the body of this page, try interacting with it, practice, and check out basic CSS concepts...</p>
17+
<div id="root"></div>
18+
19+
<hr />
20+
21+
<h2>Features to add</h2>
22+
<ul>
23+
<li>Add objects to interact with them using classes.</li>
24+
<li>Allow adding HTML</li>
25+
<li>Allow complete modification so that you can restructure with CSS and HTML to practice HTML and CSS.</li>
26+
</ul>
27+
<!-- Feature: Add objects to can interactive with ... -->
28+
<!--<div id="objects" class="w-full"></div>-->
29+
30+
<footer>
31+
© <a href="https://dev2forge.is-a.software">Dev2Forge</a> 2026
32+
</footer>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)