بسم الله الرحمن الرحيم
 
	...
 
	السلام عليكم ورحمة الله وبركاته
 
	بعد رحلة طويلة مع لغة
 
	Lua
 
	بدأت التعلم في لغات البرمجة والتصميم الخاصة بالويب وحبيت اشاركم تجربتي
 
	HELLO WORLD
 
	After along journey learning Lua, I've started learning web design and web development
 
	And I would like to share my experience with you hoping that you like it
 
	معروف إن في لغة 
 
	HTML
 
	لا يوجد
 
	(radiobutton/checkbox) مباشر
 
	وإنما الحل انك تعمل
 
	input وتغير نوعه
 
	 
 
	we know that HTML doesn't have a direct *checkbox/radio* tags
 
	but the method is to create an input and change its type
 
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input type="checkbox" value="Click 1" >
        <input type="checkbox" value="Click 2" >
        <input type="checkbox" value="Click 3" >
        
        <input type="radio" name="g" value="Click 4" >
        <input type="radio" name="g" value="Click 5" >
        <input type="radio" name="g" value="Click 6" >
        
    </body>
</html>
	ودي الطريقة اللي هتكمل بيها باقي الشرح
 
	and that is what we going to use with HTML
 
	طيب ده موضوعه سهل،، أما بالنسبة لتعديل التصميم أو الهيكل شئ مش سهل بالمرة أو مزعج نوعا ما لأن مفيش تاج معين مثلا تقدر تعدل بيه
 
	ولكن بفضل الله قدرت اعمل تاجات جديدة في 
 
	ok, that was an easy part.. but the problem is in designing as it doesn't have a direct tags to be edited
 
	But, I've created a new tags/attr to make the design easier
 
	CSS ( checkbox,  radio, bg, check )
 
checkbox {
     /* css code */
}
checkbox bg {
     /* css code */
}
checkbox bg check {
     /* css code */
}
checkbox[checked=true] bg {
     /* css code */
}
checkbox[checked=true] bg check {
     /* css code */
}
radio {
     /* css code */
}
radio bg {
     /* css code */
}
radio bg check {
     /* css code */
}
radio[checked=true] bg {
     /* css code */
}
radio[checked=true] bg check {
     /* css code */
}
	التفاصيل
 
	radio: الهيكل العام للعنصر و يحتوي على الشكل الداخلي كله
 
	radio: the hole element
 
	checkbox: الهيكل العام للعنصر و يحتوي على الشكل الداخلي كله
 
	checkbox: the hole element
 
	bg: الخلفية الخاصة بالشكل الداخلي
 
	bg: the background of the checkbox/radio itself
 
	check: الأيقونة اللي داخل الخلفية الخاصة بالشكل الداخلي
 
	check: the icon inside the bg
 
	 
 
	طيب بالنسبة اكون الجافا سكربت
 
	javascript
 
// created by Ahmed Mostafa "killerProject"
alert ("the best code i have ever made\n\nBETA\n\nCreated By: Ahmed Mostafa 'killerProject'")
msg = function (zmsg) {console.log(zmsg)}
function changeInput (_input) {
    if ( _input.getAttribute("modified") ) { return }
    if ( true ) { /* ignored */
        
        var op = _input.parentElement;
        
        var np = document.createElement( _input.type /*"label"*/ );
        
        op.replaceChild (np, _input);
        np.appendChild(_input);
        
        np.appendChild ( document.createTextNode( _input.value ) );
        
        np.style.display = "inline-block";
        np.style.overflow = "auto";
        
        np.setAttribute( "child", _input );
        
        np.setAttribute( "modified", true);
        np.setAttribute( "checked", _input.checked);
        _input.setAttribute( "modified", true);
        
        /*
        var w = _input.offsetWidth;
        var h = _input.offsetHeight;
        np.style.width = w+"px";
        np.style.height = h+"px";
        */
        
        np.style.position = "relative";
        var pw = np.offsetWidth;
        var ph = np.offsetHeight;
        var bg = document.createElement( "bg" );
        bg.appendChild ( document.createTextNode( "" ) );
        np.appendChild( bg );
        
        var check = document.createElement( "check" );
        check.appendChild ( document.createTextNode( "" ) );
        bg.appendChild( check );
        
        
        bg.style.position = "position: absolute; z-index: 2;";
        check.style.position = "position: absolute; z-index: 3;";
        
        _input.style = "position: absolute; left: 0; top: 0; padding: 0; margin: 0; width: "+pw+"px; height: "+ph+"px; -webkit-appearance: none; moz-appearance: none; appearance: none; outline: none; background: red; opacity: 0; z-index: 5;";
        np.setAttribute( "class", _input.getAttribute("class") );
        np.setAttribute( "id", _input.getAttribute("id") );
    }
}
/*
onchange = function () {
    changeInput (event.target)
}
*/
function check_create () {
    var nInput = event.target;
    changeInput (nInput);
    var parent = nInput.parentElement;
    parent.setAttribute( "checked", nInput.checked);
    
    var all = document.getElementsByTagName ("input");
    for ( let i = 0; i < all.length; i++ ) {
        if ( all[i].type == "radio" ) {
            let parent = all[i].parentElement;
            parent.setAttribute( "checked", all[i].checked);
        }
    }
}
onload = function () {
    var all = document.getElementsByTagName ("input");
    for ( let i = 0; i < all.length; i++ ) {
        changeInput (all[i])
        all[i].addEventListener("change", check_create);
    }
}
	المميزات - advantages
 
	متاح فيه التعديل عن طريق الآي دي أو الكلاس
 
	Id, class
 
	(edit by id or class)
 
	سهولة التصميم بشكل كبير جدا
 
	(too easy to edit)
 
	تبسيط الاكواد في
 
	HTML, CSS
 
	(makes html, css *radio/checkbox* more easier to be edited)
 
	 
 
	مثال على التعديل على ال
 
	CSS
 
	example (css)
 
radio {
    padding-top: 5px;
    padding-left: 35px;
    width: 250px;
    height: 25px;
    background: #ccc5;
    border-radius: 45px;
    /*box-shadow: inset 0 0 0 1px #4a148c;*/
}
checkbox {
    padding-top: 5px;
    width: 250px;
    height: 25px;
    padding-left: 55px;
    background: #ccc5;
    border-radius: 45px;
    /*box-shadow: inset 0 0 0 1px #4a148c;*/
}
radio bg {
    transition: .5s;
    box-shadow: inset 0 0 0 2px #4a148c;
    position: absolute  ;
    top: 2.5px;
    left: 2.5px;
    
    background: #fff0;
    width: 25px;
    height: 25px;
    
    border-radius: 50%;
}
radio check {
    transition: .5s;
    position: absolute  ;
    top: 5px;
    left: 5px;
    
    background: #fff0;
    width: 15px;
    height: 15px;
    
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #4a148c;
}
checkbox bg {
    transition: .5s;
    box-shadow: inset 0 0 0 2px #4a148c;
    position: absolute ;
    top: 2.5px;
    left: 2.5px;
    
    background: #fff0;
    width: 50px;
    height: 25px;
    
    border-radius: 45px;
}
checkbox check {
    transition: .5s;
    position: absolute ;
    top: 5px;
    left: 5px;
    
    background: #fff0;
    width: 15px;
    height: 15px;
    
    border-radius: 45px;
    box-shadow: inset 0 0 0 1px #4a148c;
}
/* when true */
radio[checked=true] bg {
    transition: .5s;
    background: #b39ddb;
}
radio[checked=true] check {
    transition: .5s;
    background: #4a148c;
}
checkbox[checked=true] bg {
    transition: .5s;
    background: #b39ddb;
}
checkbox[checked=true] check {
    transition: .5s;
    background: #4a148c;
    left: 30px;
}
	صورة للتصميم
 
	A picture
 
	
 
	 
 
	أتمنى تقولولي رأيكم في الفكرة وشكرا ?
 
	Please, rate the Idea ?